刮刮乐

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

#price{
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>
---------------------
作者：qq93210
来源：CSDN
原文：https://blog.csdn.net/qq93210/article/details/78055559
版权声明：本文为博主原创文章，转载请附上博文链接！