Canvas线性水平渐变

最新推荐文章于 2021-05-30 23:52:04 发布

Wangdanting123

最新推荐文章于 2021-05-30 23:52:04 发布

阅读量919

点赞数

本文链接：https://blog.csdn.net/Wangdanting123/article/details/51811854

版权

function drawScreen() {
//                水平渐变值必须保持为0
                var gr=context.createLinearGradient(0,0,100,0);
//                添加颜色断点
                gr.addColorStop(0,'red');
                gr.addColorStop(.5,'rgb(0,255,0)');
                gr.addColorStop(1,'black');

//                应用fillStyle生成渐变
                context.fillStyle=gr;
                context.fillRect(0,0,100,100);
                context.fillRect(0,100,50,100);
                context.fillRect(0,200,200,100);
//              应用strokeStyle生成渐变
                context.strokeStyle=gr;
                context.strokeRect(0,310,100,100);
//              复杂形状水平渐变
                var gr=context.createLinearGradient(300,0,400,0);
                gr.addColorStop(0,'rgb(0,255,0)');
                gr.addColorStop(.5,'blue');
                gr.addColorStop(1,'red');
                context.fillStyle=gr;
                context.beginPath();
                context.moveTo(300,0);
                context.lineTo(350,0);
                context.lineTo(400,50);
                context.lineTo(350,100);
                context.lineTo(300,100);
                context.lineTo(300,0);
                context.stroke();
                context.fill();
                context.closePath();


           }