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>