zoukankan      html  css  js  c++  java
  • 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>  
    

      

  • 相关阅读:
    WindowsServer2003SP2EnterpriseEdition激活码
    2016/12/14渗透学习总结
    技术之路注定孤独
    几道office题的总结
    一路走来,只是清风
    【IIS】IIS中同时满足集成模式和经典模式
    IntelliJ IDEA如何build path
    kafka的集群安装
    尚硅谷 kafka
    队列
  • 原文地址:https://www.cnblogs.com/adtuu/p/4673888.html
Copyright © 2011-2022 走看看