html5实现渐变效果

最新推荐文章于 2021-12-18 22:48:01 发布

weixin_33753845

最新推荐文章于 2021-12-18 22:48:01 发布

阅读量226

点赞数

原文链接：http://www.cnblogs.com/adtuu/p/4673872.html

版权

<canvas id='test01'></canvas>


<script>
function draw25(id) {
    var canvas = document.getElementById(id);
    if (canvas == null)
        return false;
    var context = canvas.getContext('2d');
    var g1 = context.createLinearGradient(0, 0, 0, 300);

    g1.addColorStop(0, 'rgb(255,0,0)'); //红  
    g1.addColorStop(0.5, 'rgb(0,255,0)');//绿
    g1.addColorStop(1, 'rgb(0,0,255)'); //蓝

    //可以把lg对象理解成GDI中线性brush
    context.fillStyle = g1;
    //再用这个brush来画正方形
    context.fillRect(0, 0, 400, 300);  
}

draw25('test01');
</script>

转载于:https://www.cnblogs.com/adtuu/p/4673872.html