关闭

HTML5中canvas线性渐变的用法

341人阅读 评论(0) 收藏 举报
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script>
        function draw2D(){
            var canvas=document.getElementById("canvas-fram");
            if(canvas==undefined){
                return ;
            }
            canvas.width=1000;  //设置画布的宽
            canvas.height=1000; //设置画布的高
            var context=canvas.getContext("2d");
            var g1 = context.createLinearGradient(0, 0, 0, 300);//创建一个渐变对象,坐标开始为0,0,终点是0,300,说明渐变是从0,0到0,300的
            g1.addColorStop(0, 'rgb(255,0,0)');     //添加一个渐变颜色,设定的颜色离渐变结束点的偏移量(0~1)
            g1.addColorStop(0.5, 'rgb(0,255,0)');   //绿
            g1.addColorStop(1, 'rgb(0,0,255)');     //蓝
            context.fillStyle = g1;                 //gl在显存中已经生成了渐变对象,然后把该颜色填充到fillStyle中
            context.fillRect(0, 0, 300, 300);       //创建一个正方形
        }
    </script>
</head>
<body onload="draw2D()">
<canvas id="canvas-fram"></canvas>
</body>
</html>

运行效果图:


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:157145次
    • 积分:1942
    • 等级:
    • 排名:千里之外
    • 原创:78篇
    • 转载:36篇
    • 译文:0篇
    • 评论:16条
    最新评论