html实现层叠加

<div >
<canvas >
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
<canvas >
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 ></canvas>  
 <canvas ></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>