前端刮刮乐特效

<!doctype html>
<html>

   <head>
       <meta charset="UTF-8">
       <title></title>
       <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
       <link href="css/mui.min.css" rel="stylesheet" />
       <style type="text/css">
           .guaguale{
               width: 100%;
               height: 100%;
               background: salmon;
               position: absolute;
           }
           .guaimg{
               width: 300px;
               height: 300px;
           }
           #can{
               width: 300px;
               height: 300px;
               position: absolute;
               left: 0;
               top: 0;
           }
       </style>
   </head>
       <div class="guaguale">
           <img src="img/1106914.jpg" class="guaimg"/>
           <canvas id="can" width="" height=""></canvas>
       </div>
   <body>
       <script src="js/mui.min.js"></script>
       <script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
       <script type="text/javascript">
           mui.init();
           $(function(){
               var c = document.getElementById('can')
               var ctx = c.getContext('2d');
               ctx.fillStyle="gray";
               ctx.globalCompositeOperation='destination-over';
               ctx.beginPath();
               ctx.fillRect(0,0,300,300);
               ctx.closePath();
               c.ontouchmove=function(e){
                   var e = e.touches[0];
                   var x = e.clientX;
                   var y = e.clientY;
                   ctx.globalCompositeOperation = "destination-out";
                   ctx.beginPath();
                   ctx.arc(x,y,10,0,2*Math.PI,true);
                   ctx.fill();
                   ctx.closePath();
               }
           })
       </script>
   </body>

</html>

猜你喜欢