6.canvas 刮刮乐练习题
效果图

版本1.0
image.png
   <style type="text/css">
      
      .wrapper{
        width: 300px;
        height: 300px;
        border: 1px solid black;
        margin: 100px auto;
        position: relative;
      }
      .wrapper canvas {
        position: absolute;
        left: 0;
        right: 0;
      }
      .wrapper div{
        position: absolute;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background-color: #f00;
      }
      .wrapper div img{
        position: absolute;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
      }
      
      
      
      
    </style>
  </head>
  
  <body>
    <div class="wrapper">
      <div class="item">
        <img src="img/2test.jpg"/>
        <canvas id="myCanvas" width="300" height="300"></canvas>
      </div>      
    </div>
    
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
      
        var myCanvas = document.getElementById("myCanvas");
        var ctx = myCanvas.getContext("2d");
        
        ctx.fillRect(0,0,300,300);
        
        ctx.globalCompositeOperation = "destination-out";
        
        myCanvas.onmousedown = function (e) {
          var parent = this.parentNode.parentNode;
            document.onmousemove = function (e) {
            var x = e.clientX - parent.offsetLeft;
            var y = e.clientY - parent.offsetTop;
            ctx.beginPath();
            ctx.arc(x,y,20,0,2 * Math.PI,1);
            ctx.fill();
            }
            document.onmouseup = function () {
              document.onmousemove = null;
                document.onmouseup = null;
            }
        }
最后编辑于：2018.12.19 17:04:55
6.canvas 刮刮乐 练习题

效果图

推荐阅读更多精彩内容

6.canvas 刮刮乐练习题
