刮刮奖

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title>刮刮奖</title>
 6     <meta name="viewport" content="initial-scale=1.0, width=device-width,minimum-scale=1.0,maximum-scale=1.0, user-scalable=no" />
 7     <style type="text/css">
 8         body{
 9             margin: 0;
10         }
11         .wrap {
12             width: 320px;
13             height: 400px;
14             background: url('thumb-6.jpg') 0 0 no-repeat;
15             background-size: cover;
16         }
17     </style>
18 </head>
19 <body>
20     <div id="con" class="wrap">
21         <canvas id="myCanvas" width="320" height="400"></canvas>
22     </div>
23 
24     <script type="text/javascript" src="jquery-2.0.3.min.js"></script>
25     <script type="text/javascript">
26         $(function(){
27             //创建画布
28             var myCanvas =  document.getElementById('myCanvas');
29             var gray = myCanvas.getContext('2d');
30             //创建灰色层
31             gray.beginPath();
32             gray.fillStyle = "#999";
33             gray.fillRect(0,0,320,400);
34             gray.closePath();
35             gray.globalCompositeOperation="destination-out";
36             //画布绑定touch事件，在touchmove的时候进行画布的清除
37             myCanvas.addEventListener('touchstart', function (e) {
38                 myCanvas.addEventListener('touchmove', function(e){
39                     gray.beginPath();
40                     gray.fillStyle = "#f00";
41                     gray.arc(e.targetTouches[0].clientX, e.targetTouches[0].clientY, 20, 0, Math.PI*2);
42                     gray.fill();
43                     gray.closePath();
44                 });
45             })
46 
47 
48         })
49     </script>
50 </body>
51 </html>