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>