HTML5 Canvas 开发绘图方法整理【十、Canvas渐变、图形渐变&&文字渐变】-蒲公英云

HTML5 Canvas 开发绘图方法整理【十、Canvas渐变、图形渐变&&文字渐变】

基础渐变三部曲：

语法：
1、创建渐变对象
ctx.createLinearGradient(x0,y0,x1,y1);
x0,y0 渐变开始点坐标 x1,y1 渐变结束点坐标

2、设定渐变样式
addColorStop(value1,”black”);
addColorStop(value2,”white”);
value1是渐变开始的地方，value2是渐变结束的地方

3、将设定好的渐变样式赋值使用
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);

再来段示例代码：

<script>
    window.onload=function () {
        let cans = document.getElementById("seventhC");
        let ctx = cans.getContext("2d");
        //径向渐变
        let gra=ctx.createLinearGradient(50,100,250,0);
        gra.addColorStop(0,"#D348FF");
        gra.addColorStop(1,"#43D1FF");
        ctx.fillStyle=gra;
        ctx.fillRect(0,20,300,100);
        //文字渐变
        ctx.font="bold 30px KaiTi";
        ctx.fillText("文字渐变效果",100,200);
        //圆形渐变
        ctx.beginPath();
        ctx.arc(200,380,100,0,180*Math.PI);
        ctx.closePath();
        gra.addColorStop(0,"#FF6CE5");
        gra.addColorStop(0.3,"#43D1FF");
        gra.addColorStop(1,"#D348FF");
        ctx.fillStyle=gra;
        ctx.fill();
    };
</script>