刮刮卡效果

实现刮刮卡效果，刮层下面是文字；

 

<canvas id="canvas_background" width="145px" height="35px"></canvas>
<canvas id="score"></canvas>
<script type="text/javascript">
	(function (bodyStyle) {
		
		// 在FF浏览器环境中，通过修改CSS3属性，使子元素中所有的文字都不能选择。
		bodyStyle.mozUserSelect = 'none';
		// 在Google浏览器环境中，通过修改CSS3属性，使子元素中所有的文字都不能选择。
		bodyStyle.webkitUserSelect = 'none';
		
		var canvas_score = document.querySelector('#score'), ctx_score = canvas_score.getContext('2d');
		var canvas = document.querySelector('#canvas_background'), ctx = canvas.getContext('2d');
		
		var mousedown = false;
		var trigger = true;
		var w = 145, h = 35;
		
		//中奖文字信息
		var winInfo = "谢谢参与";
		ctx_score.font = 'Normal 60px 宋体';
		ctx_score.fillStyle = '#000000';
		ctx_score.fillText(winInfo, 30, 90);
		
		//添加灰色刮层
		ctx.fillStyle = 'gray';
		ctx.fillRect(0, 0, 145, 35);
		
		// 在已有内容和新图形不重叠的地方，已有内容保留，所有其他内容成为透明。
		ctx.globalCompositeOperation = 'destination-out';
		// 处理“鼠标”或“手指”按下时的动作。
		function eventDown(e){
			// 通知浏览器不要执行与事件关联的默认动作。
			e.preventDefault();
			
			// 得到中奖图片的像素数据（像素计算非常耗费CPU和内存，可能会导致浏览器崩溃）。
			var data = ctx.getImageData(0, 10, w, h).data;
			// 通过计算每一个像素，得知还有多少“遮挡区域”。
			for (var i = 0, j = 0; i < data.length; i += 4) {
				if (data[i] && data[i + 1] && data[i + 2] && data[i + 3]) {
					j++;
				}
			}
			// 存在遮挡区域时才触发刮奖事件。
			if (j <= 0) {
				trigger = false;
			}
			mousedown = true;
		}
		// 处理“鼠标”或“手指”按下后移动时的动作。
		function eventMove(e){
			e.preventDefault();
			if (mousedown) {
				// 如果存在涉及当前事件的手指的一个列表（这里是指正在移动中的手指）。
				if (e.changedTouches){
					// 取得涉及当前事件中众多手指中的最后一个。
					e = e.changedTouches[e.changedTouches.length - 1];
				}
				
				// 计算当前“鼠标”或“手指”在canvas中的坐标（注意，计算的坐标是canvas里的坐标）。
				var x = (e.clientX + document.body.scrollLeft || e.pageX) - canvas.offsetLeft || 0,
					y = (e.clientY + document.body.scrollTop || e.pageY) - canvas.offsetTop || 0;

				with (ctx) {
					beginPath();
					arc(x, y, 10, 0, Math.PI * 2);
					fill();
				}
			}
		}
		// 处理“鼠标”或“手指”按下后抬起时的动作。
		function eventUp(e){
			e.preventDefault();
			mousedown = false;
			if(trigger){
				// 得到中奖图片的像素数据（像素计算非常耗费CPU和内存，可能会导致浏览器崩溃）。
				var data = ctx.getImageData(0, 10, w, h).data;
				// 通过计算每一个像素，得知还有多少“遮挡区域”。
				for (var i = 0, j = 0; i < data.length; i += 4) {
					if (data[i] && data[i + 1] && data[i + 2] && data[i + 3]) {
						j++;
					}
				}
				// 当还只剩下20%的遮挡区域时弹出中奖信息，同时撤掉遮挡区域。
				if (j <= w * h * 0.35) {
					ctx.clearRect(0, 0, w, h);				
				}
			}
		}
		
		// 监听“触摸的开始、移动与抬起”事件。
		canvas.addEventListener('touchstart', eventDown);
		canvas.addEventListener('touchend', eventUp);
		canvas.addEventListener('touchmove', eventMove);
		// 监听“鼠标的开始、移动与抬起”事件。
		canvas.addEventListener('mousedown', eventDown);
		canvas.addEventListener('mouseup', eventUp);
		canvas.addEventListener('mousemove', eventMove);
	
	})(document.body.style);
		
</script>