//基础
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)
