首页 > Web开发 > 详细

html5实现渐变效果

时间:2015-07-24 18:03:11      阅读:231      评论:0      收藏:0      [点我收藏+]
<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>

  

html5实现渐变效果

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!