js代码

<script type="text/javascript">
window.onload = function(){
	var body = document.querySelector("body");
	var img = new Image();
	var canvas = document.querySelector("canvas");
	body.userSelect = "none";
	img.src = "1.jpg";
	canvas.style.backgroundImage='url('+img.src+')';
	canvas.style.position = 'absolute';
	img.addEventListener("load",function(){
		var ctx;
		var w = img.width,
			h = img.height;
		function layer(ctx){
			ctx.fillStyle = "gray";
			ctx.fillRect(0, 0, w, h)
		}
		canvas.width = w;
		canvas.height = h;
		ctx=canvas.getContext('2d');//表示在画布上的描绘环境
		layer(ctx); //描绘顶层的灰色图层
		ctx.globalCompositeOperation="destination-out";
		ctx.lineWidth=20
		ctx.lineCap="round"
		ctx.lineJoin="round";
		ctx.font = "40px Arial"
		ctx.fillText("刮开有惊喜", 100, 100);
		ctx.fillStyle = "red";
		var startX,startY,endX,endY;
		canvas.addEventListener("touchstart",function(e){
			startX = e.targetTouches[0].pageX;
			startY = e.targetTouches[0].pageY;
			ctx.moveTo(startX, startY);

		})
		canvas.addEventListener("touchmove",function(e){
			endX = e.targetTouches[0].pageX;
			endY = e.targetTouches[0].pageY;
			ctx.lineTo(endX,endY); 
			ctx.stroke();
		})
	})
   
}
</script>