改写了个js特效，刮刮卡效果

原帖地址：
http://tieba.baidu.com/p/3457174862
这个效果不错，不过代码过于臃肿。我一向是比较讨厌看太长的代码的，所以写了一个同样效果的精简版特效。。
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0;">
<title>橡皮擦效果</title>
<style>
div{
margin:20px auto;
position:relative;
text-align:center;
width:200px;
height:80px;
border:1px soild #999;
line-height:80px;
}
div>canvas{
position:absolute;
left:0;top:0;
z-index:2;
}
</style>
<div>
你不可能中奖的
<canvas id='cvs' width=200 height=80></canvas>
</div>
<script>
var c=document.getElementById("cvs");
var p=c.parentNode;
var ctx=c.getContext("2d");
ctx.fillStyle="#EEE6CD";
ctx.fillRect(0,0,c.width,c.height);
ctx.globalCompositeOperation="destination-out";
var on=0;
var md=[
["touchstart","mousedown",function(){on=1;}],
["touchmove","mousemove",function(e){
e.preventDefault();
if(!on)return;
if(!e.pageX)e=e.targetTouches[0];
ctx.beginPath();
ctx.arc(e.pageX-p.offsetLeft,e.pageY-p.offsetTop,15,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
}],
["touchend","mouseup",function(){on=0;}]
];
for(var i=0;i<3;i++)document.addEventListener(md[i][document.ontouchstart===undefined&1],md[i][2]);
</script>
如上。。