canvas图层

canvas理论上是不存在图层的概念，要实现图层可以通过在内存中建立多个canvas对象，通过globalCompositeOperation设置每个图层间重叠的方式以及通过globalAlpha设置每个图层的透明度。
其他不多说，下面是简单实现canvas图层的一个例子

    const mainCvs = document.querySelector('#mainCvs');
    const mainContext = mainCvs.getContext('2d');
    mainContext.fillStyle = '#f5f5f5';
    mainContext.fillRect(0, 0, 300, 300);
    mainContext.fillStyle = '#ff0000';
    mainContext.fillRect(10, 10, 40, 40);
    const lay1 = document.createElement('canvas');
    const lay1Context = lay1.getContext('2d');
    lay1Context.fillStyle = '00ff00';
    lay1Context.fillRect(10, 10, 40, 40);

    const lay2 = document.createElement('canvas');
    const lay2Context = lay2.getContext('2d');
    lay2Context.fillStyle = '#0000ff';
    lay2Context.fillRect(10, 10, 40, 40);
    
    // document.body.append(lay1);
    // document.body.append(lay2);
    
    mainContext.globalCompositeOperation = 'copy';
    mainContext.globalAlpha = 0.5; 
    mainContext.drawImage(lay1, 60, 30, 40, 40);
    mainContext.drawImage(lay2, 80, 50, 10, 10)