1  <div class="zj">
2 <canvas id="CanvasLe" width="280" height="140" style="margin-top:10px;"></canvas>
3  </div>
4
5 <style>.zj{background:url("zj.png") no-repeat ;}</style>

 1 window.onload = function(){
 2         init();
 3     }
 4     var imageWidth = "280";
 5     var imageheight = "140";
 6     function init(){
 7     //定义绘画宽 高
 8
 9     //定义Canvas对象
10     var Canavas = document.getElementById("CanvasLe");
11     var Context2D = Canavas.getContext("2d");
12
13     var bool =true;
14     Context2D.fillStyle='#cccccc';    //设置覆盖层的颜色
15     Context2D.fillRect(0,0,imageWidth,imageheight);    //设置覆盖的区域
16 //增加Canvas鼠标滑动事件
17     Canavas.onmousemove = function(e) {
18         var canvasOffset = $(Canavas).offset();
19         var canvasX = Math.floor(e.pageX - canvasOffset.left);
20         var canvasY = Math.floor(e.pageY - canvasOffset.top);
21         canvasY += parseInt(imageheight);
22         lottery(canvasX,canvasY,Context2D);
23     }
24     }
25 //刮刮函数
26     function lottery(x,y,c){
27         c.clearRect(x,y-imageheight,20,20);
28     }

 1 Canavas.addEventListener('touchmove', function(event) {
 2         // 如果这个元素的位置内只有一个手指的话
 3         if (event.targetTouches.length == 1) {
 4             event.preventDefault();// 阻止浏览器默认事件，重要
 5             var touch = event.targetTouches[0];
 6             // 把元素放在手指所在的位置
 7             var canvasOffset = $(Canavas).offset();
 8             var canvasX = Math.floor(touch.pageX - canvasOffset.left);
 9             var canvasY = Math.floor(touch.pageY - canvasOffset.top);
10              lottery(touch.pageX,touch.pageY,Context2D);
11         }
12     }, false);