自己实现一个刮刮乐

　　今天有看到一个园友发了一篇自己实现的刮刮了，感觉挺好玩的就下下来看看，结果运行不了，想想也不是太难就决定自己实现一个，还是花了点时间的，源码下载链接在最下面（这个绝对有用，除非你的浏览器不支持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                 }

 　　虽然说这个实现起来很简单，但是效果还过得去。不过我想进一步实现一点东西就遇到了点问题，首先是这个东西怎么调还是会看到一点锯齿的，再一个是怎样识别你已经刮完了（考虑过识别已经划过的点，但是感觉这个不太好），所以希望有解决方法的园友赐教。

源码下载  

在线演示