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>