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