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

1， 蒙版，

將rgba的透明度設(shè)為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()線(xiàn)性漸變

//這些坐標(biāo)相對(duì)于整個(gè)canvas
var grd=ctx.createLinearGradient(x0,y0,x1,y1);
//添加漸變，其中0是漸變點(diǎn)，最大1
grd.addColorStop(0,"hsla(180, 100%, 50%,0)");

x0 漸變開(kāi)始點(diǎn)的 x 坐標(biāo)
y0 漸變開(kāi)始點(diǎn)的 y 坐標(biāo)
x1 漸變結(jié)束點(diǎn)的 x 坐標(biāo)
y1 漸變結(jié)束點(diǎn)的 y 坐標(biāo)

使用該對(duì)象作為 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)