刮刮乐移动端

<meta name="viewport" content="width=device-width">
<style>
*{
padding: 0;
margin:0;
}
#box{
width:100%;
height:200px;
}


#price{
width:100%;
height:200px;
background: orange;


}


#c1{
position: absolute;
top:0;
left:0;
}
</style>

<div id="box">

<div id="price"></div>
<canvas id="c1">此浏览器不支持canvas</canvas>
</div>
<script type="text/javascript">
var c1=document.getElementById("c1");
var ctx=c1.getContext("2d");
//返回窗口的文档显示区的宽度。
var w=window.innerWidth;
// console.log(w);
c1.width=w;
c1.height=200;
//遮罩层
ctx.fillStyle="#ccc";
ctx.fillRect(0,0,w,200);




//touchstart事件：当手指触摸屏幕时触发，即使已经有一个手指放在屏幕上也会触发
//touchmove事件：当手指在屏幕上滑动的时候连续的触发


c1.addEventListener("touchstart",sfn);
c1.addEventListener("touchmove",mfn);


function sfn(e){//事件对象 
// console.log(e.touches);
var startX=e.touches[0].clientX;//获取到触点到坐标
var startY=e.touches[0].clientY;


ctx.beginPath();
ctx.lineWidth=25;
ctx.lineCap="round";//设置线段顶点到样式
ctx.lineJoin="round";//线段交接的位置的样式
ctx.globalCompositeOperation="destination-out";
ctx.moveTo(startX,startY);
}


function mfn(e){//事件对象
var moveX=e.touches[0].clientX;
var moveY=e.touches[0].clientY;
ctx.lineTo(moveX,moveY);
ctx.stroke();
}


</script>