SOURCE

function draw(){
    //通过修改fillRect参数
    const ctx = document.getElementById('canvas').getContext('2d')
    for(let i=0;i<4;i++){
        for(let j=0;j<3;j++){
            ctx.fillStyle = `rgba(${51*j}, ${255-51*j}, ${255-51*j}, ${i*0.2+0.1})`
            ctx.fillRect(30*i+10,30*j+10,25,25)
        }
    }
}

function trans(){
    const ctx = document.getElementById('trans').getContext('2d')
    for(let i=0;i<4;i++){
        for(let j=0;j<3;j++){
            ctx.save()
            ctx.fillStyle = `rgba(${51*j}, ${255-51*j}, ${255-51*j}, ${i*0.2+0.1})`
            ctx.translate(30*i+10,30*j+10)
            ctx.fillRect(0,0,25,25)
            ctx.restore()
        }
    }
}

draw()

trans()

<canvas id="canvas"></canvas>

<canvas id="trans"></canvas>