html实现层叠加

<div id="canvasesdiv" style="position:relative; width:400px; height:300px">
<canvas id="layer1" style="z-index: 1; position:absolute; left:0px; top:0px;" height="300px" width="400">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
<canvas id="layer2" style="z-index: 2; position:absolute; left:20px; top:10px;" height="300px" width="400">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
</div>
 
<script>
layer1 = document.getElementById("layer2").getContext("2d");
layer2 = document.getElementById("layer2").getContext("2d");
 
layer1.moveTo(50, 0);
layer1.lineTo(0, 50);
layer1.lineTo(50, 100);
layer1.lineTo(100, 50);
layer1.lineTo(50, 0);
layer1.stroke();
 
layer2.moveTo(50, 50);
layer2.lineTo(50, 52); 
 
layer2.moveTo(60, 50);
layer2.lineTo(60, 52); 
 
layer2.moveTo(70, 50);
layer2.lineTo(70, 52); 
 
layer2.stroke();
</script>

 <canvas id="myCanvas1" width="500px" height="400px"></canvas>
 <canvas id="myCanvas2" width="500px" height="400px" style="z-index:2"></canvas>  
 
<script>
    var context1 = document.getElementById("myCanvas1").getContext("2d");
    var context2 = document.getElementById("myCanvas2").getContext("2d");  
 
    context1.fillStyle = "red";
    context1.fillRect(50,50,100,100);
    context1.fillStyle = "rgba(0,0,255,0.4)";
    context1.fillRect(80,80,100,100);
    context1.fill();
    //context2.fill();
</script>