HTML5中canvas线性渐变的用法

最新推荐文章于 2021-06-20 12:35:27 发布

sxjlinux

最新推荐文章于 2021-06-20 12:35:27 发布

阅读量859

点赞数

本文链接：https://blog.csdn.net/sunxiaoju/article/details/49945177

版权

<!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 οnlοad="draw2D()">
<canvas id="canvas-fram"></canvas>
</body>
</html>

运行效果图：