html实现层叠加

<div id="canvasesdiv" style="position:relative; 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>