canvas渐变实现

//基础
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var w = c.width = window.innerWidth;//屏幕宽高
var h = c.height = window.innerHeight;//屏幕宽高

1， 蒙版，

将rgba的透明度设为0.1

var y=0;
setInterval(function(){
    y+=3;
    ctx.fillStyle = "rgba(0, 0, 0, .1)";
    ctx.fillRect(0, 0, w, h);//清除每一帧
    ctx.fillStyle = 'hsl(180, 100%, 50%)';
    ctx.fillRect(50, y,5, 50);
},20)

2，createLinearGradient()线性渐变

//这些坐标相对于整个canvas
var grd=ctx.createLinearGradient(x0,y0,x1,y1);
//添加渐变，其中0是渐变点，最大1
grd.addColorStop(0,"hsla(180, 100%, 50%,0)");

x0 渐变开始点的 x 坐标
y0 渐变开始点的 y 坐标
x1 渐变结束点的 x 坐标
y1 渐变结束点的 y 坐标

使用该对象作为 strokeStyle 或 fillStyle 属性的值。

setInterval(function(){
    y+=3;
    ctx.fillStyle = "rgba(0, 0, 0, 1)";
    ctx.fillRect(0, 0, w, h);//清除每一帧

    var grd=ctx.createLinearGradient(50,y,55,y+50);
        grd.addColorStop(0,"hsla(180, 100%, 50%,0)");
        grd.addColorStop(1,"hsla(180, 100%, 50%,1)");
    ctx.fillStyle = grd;
    ctx.fillRect(50, y,5, 50);
},20)