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>  
    

      

  • 相关阅读:
    1337语言
    BEEF实战全记录
    MySQL字符集编码设置与PHP显示乱码的解决办法
    设置MySql5.5数据库的字符编码为UTF8,解决中文乱码问题
    如何在BeEF中使用metasploit颠覆你的浏览器
    xss窃取cookie测试
    xss测试代码
    'or'='or'经典漏洞代码分析
    mysql注入漏洞测试网页
    ipc$入侵
  • 原文地址:https://www.cnblogs.com/adtuu/p/4673888.html
Copyright © 2011-2022 走看看