今天有看到一个园友发了一篇自己实现的刮刮了，感觉挺好玩的就下下来看看，结果运行不了，想想也不是太难就决定自己实现一个，还是花了点时间的，源码下载链接在最下面（这个绝对有用，除非你的浏览器不支持canvas）。废话不多说，讲解一下几个重要的点吧：
一、首先是刮刮卡的效果，很自然想到两层，于是我采用了两层重叠的canvas
<canvas id="back" width="400px" height="200px" border="2px"></canvas> <canvas id="front" width="400px" height="200px" border="2px"></canvas>
back这个用来显示底下的文字信息，上面的显示涂层。这样我们的处理就只与front有关了。我们就只要在back上画字， front上面华一层银色的涂层：
1 Canvas.fillRect(back,0,0,400,200,"gold") 2 Canvas.drawText(back,"谢谢惠顾",60,120,"black"); 3 Canvas.fillRect(front,0,0,400,200,"silver");
二、事件的监听处理，为了方便我就没有采用手机端，所以用的都是mouse事件，刮刮乐就是要将上面的一层去掉，这个我们很 自然的就会想到clearRect，所以事件处理的思路也很简单就是处理出表要刮掉的那些地方，最简单就是捕捉每个鼠标到的 点然后clear一块，但是这样如果块太大的话会导致效果很难看，快太小中间会有断点，这是处理断点就成了一个问题，我 采用的方法就是记录上次的点连着都清一次，这样的效果还是挺好的。代码如下：
1 function mouseDown(e){ 2 e.preventDefault(); 3 isDown=true; 4 } 5 function mouseUp(e){ 6 e.preventDefault(); 7 isDown=false; 8 isFirst=true; 9 } 10 function mouseMove(e) { 11 e.preventDefault(); 12 if(e.clientX>480+400||e.clientX<480+0||e.clientY<0+260||e.clientY>200+260){ 13 isDown=false; 14 } 15 if(isDown){ 16 if(isFirst){ 17 front.clearRect(e.clientX-480,e.clientY-260,10,10); 18 prex=e.clientX-480; 19 prey=e.clientY-260; 20 isFirst=false; 21 } 22 else{ 23 if(e.clientX-480>prex){ 24 var k=(e.clientY-260-prey)/(e.clientX-480-prex); 25 var i=0; 26 for(i=prex;i<e.clientX-480;i+=5){ 27 front.clearRect(i,i*k+prey-k*prex,10,10); 28 } 29 } 30 else{ 31 var k=(e.clientY-260-prey)/(e.clientX-480-prex); 32 var i=0; 33 for(i=prex;i>e.clientX-480;i-=5){ 34 front.clearRect(i,i*k+prey-k*prex,10,10); 35 } 36 } 37 prex=e.clientX-480; 38 prey=e.clientY-260; 39 } 40 }
虽然说这个实现起来很简单，但是效果还过得去。不过我想进一步实现一点东西就遇到了点问题，首先是这个东西怎么调还是会看到一点锯齿的，再一个是怎样识别你已经刮完了（考虑过识别已经划过的点，但是感觉这个不太好），所以希望有解决方法的园友赐教。