使用canvas制作刮刮卡效果（1）

本效果目前只有touch事件，还没有做pc端和手机端的区分和适应。

另外，只是单纯的刮的效果，兼容性目前还没有广泛测试，希望看到的不兼容性能够提出来哦，如果有解决办法那就更好啦~

下一步会加入多端适应。

html代码：

<canvas id="canvas"></canvas>
	<div id="bgimg"></div>

css样式：

<style type="text/css">
		*{ margin: 0 auto; padding:0;}
		body{ width: 100%; height: 100%; overflow: hidden;}
		canvas,#bgimg{ width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
		canvas{ z-index: 100;}
		#bgimg{ background: url(bg.jpg) no-repeat center; background-size: cover; z-index: 50; display: none;}
	</style>

js：

<script type="text/javascript">
		var ww = window.innerWidth;
		var wh = window.innerHeight;
		var body = document.getElementsByTagName('body').item(0),
		canvas = document.getElementById('canvas'),
		bgimg = document.getElementById('bgimg');
		body.style.width = ww;
		body.style.width = wh;

		canvas.width = ww;
		canvas.height = wh;
		var ctx = canvas.getContext('2d');

		var canimg = new Image();
		canimg.src = 'img.jpg';


		canimg.onload = function(){
			bgimg.style.display = 'block';
			var imgwidth = canimg.width;
			var imgheight = canimg.height;
			
			if(imgwidth/imgheight > ww/wh){
				var sh = imgwidth - (ww*imgheight)/wh;
				ctx.drawImage(canimg,sh/2,0,(ww*imgheight)/wh,imgheight,0,0,ww,wh);
			}else if(imgwidth/imgheight < ww/wh){
				var sw = imgheight - (wh*imgwidth)/ww;
				ctx.drawImage(canimg,0,sw/2,imgwidth,(wh*imgwidth)/ww,0,0,ww,wh);
			}else{
				ctx.drawImage(canimg,0,0);
			}
			

			ctx.lineCap = 'round';
			ctx.lineJoin = 'round';
			ctx.lineWidth = 40;

			ctx.strokeStype = "transprent";
			ctx.globalCompositeOperation = "destination-out";
			var x1,x2,y1,y2;

			canvas.addEventListener('touchstart',function(){
				event.preventDefault();
				
				var touch = event.targetTouches[0];
				x1 = touch.pageX;
				y1 = touch.pageY;
				//ctx.pointTo(x1,y1);
			},false);

			canvas.addEventListener('touchmove',function(){
				event.preventDefault();
				var touch = event.touches[0];
				ctx.save();
				ctx.translate(1,1);
				ctx.beginPath();
				x2 = touch.pageX;
				y2 = touch.pageY;

				ctx.moveTo(x1,y1);
				//ctx.arc(x,y,20,0,2*Math.PI);
				//ctx.fill();
				
				ctx.lineTo(x2,y2);
				x1 = x2;
				y1 = y2;
				ctx.stroke();
				ctx.translate(0,0);
				ctx.restore();
				ctx.closePath();
			},false);

			canvas.addEventListener('touchend',function(){},function(){
				event.preventDefault();
			});

		}
		


	</script>

底下的图片：

上一层的图片：

刮开的效果：