HTML5实体刮刮乐效果！

先来看DEMO吧，http://codepen.io/jonechen/pen/ZOyxmq

HTML部分：

<div class="msg">
	<a href="javascript:void(0)" onclick="window.location.reload()">再试一次</a>
</div>
<canvas class="canvas"></canvas>

JS部分：

var bodystyle = document.body.style;
bodystyle.mozUserSelect = 'none';
bodystyle.webkitUserSelect = 'none';
var img = new Image();
var canvas = document.querySelector('canvas');
canvas.style.backgroundColor = 'transparent';
canvas.style.position = 'absolute';
var imgs = ['http://labfile.oss.aliyuncs.com/courses/133/p_0.jpg', 'http://labfile.oss.aliyuncs.com/courses/133/p_1.jpg'];
var num = Math.floor(Math.random() * 2);
img.src = imgs[num];
img.addEventListener('load', function(e) {
	var ctx;
	var w = img.width,
		h = img.height;
	var offsetX = canvas.offsetLeft,
		offsetY = canvas.offsetTop;
	var mouseDown = false;

	function layer(ctx) {
		ctx.fillStyle = 'gray';
		ctx.fillRect(0, 0, w, h)
	};

	function eventDown(e) {
		e.preventDefault();
		mouseDown = true;
	}

	function eventUp(e) {
		e.preventDefault();
		mouseDown = false;
	}

	function eventMove(e) {
		e.preventDefault();
		if (mouseDown) {
			// changedTouches 最近一次触发该事件的手指信息
			if (e.changedTouches) {
				e = e.changedTouches[e.changedTouches.length - 1];
			}
			var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0;
			var y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0;
			with(ctx) {
				beginPath();
				arc(x, y, 10, 0, Math.PI * 2);
				fill();
			}
		}
	}
	canvas.width = w;
	canvas.height = h;
	canvas.style.backgroundImage = 'url(' + img.src + ')';
	ctx = canvas.getContext('2d');
	ctx.fillStyle = 'transparent';
	ctx.fillRect(0, 0, w, h);
	layer(ctx);
	ctx.globalCompositeOperation = "destination-out";
	canvas.addEventListener('touchstart', eventDown);
	canvas.addEventListener('touchend', eventUp);
	canvas.addEventListener('touchmove', eventMove);
	canvas.addEventListener('mousedown', eventDown);
	canvas.addEventListener('mouseup', eventUp);
	canvas.addEventListener('mousemove', eventMove);
}, false)