如果你觉得内容对你有帮助，请点个赞

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

Canvas.fillRect(back,0,0,400,200,"gold")
            Canvas.drawText(back,"谢谢惠顾",60,120,"black");
            Canvas.fillRect(front,0,0,400,200,"silver");

二、事件的监听处理，为了方便我就没有采用手机端，所以用的都是mouse事件，刮刮乐就是要将上面的一层去掉，这个我们很　　自然的就会想到clearRect，所以事件处理的思路也很简单就是处理出表要刮掉的那些地方，最简单就是捕捉每个鼠标到的　　点然后clear一块，但是这样如果块太大的话会导致效果很难看，快太小中间会有断点，这是处理断点就成了一个问题，我　　采用的方法就是记录上次的点连着都清一次，这样的效果还是挺好的。代码如下：

function mouseDown(e){
                e.preventDefault();
                isDown=true;
            }
            function mouseUp(e){
                e.preventDefault();
                isDown=false;
                isFirst=true;
            }
            function mouseMove(e) {
                e.preventDefault();
                if(e.clientX>480+400||e.clientX<480+0||e.clientY<0+260||e.clientY>200+260){
                    isDown=false;
                }
                if(isDown){
                    if(isFirst){
                        front.clearRect(e.clientX-480,e.clientY-260,10,10);
                        prex=e.clientX-480;
                        prey=e.clientY-260;
                        isFirst=false;
                    }
                    else{
                        if(e.clientX-480>prex){
                            var k=(e.clientY-260-prey)/(e.clientX-480-prex);
                            var i=0;
                            for(i=prex;i<e.clientX-480;i+=5){
                                front.clearRect(i,i*k+prey-k*prex,10,10);
                            }
                        }
                        else{
                            var k=(e.clientY-260-prey)/(e.clientX-480-prex);
                            var i=0;
                            for(i=prex;i>e.clientX-480;i-=5){
                                front.clearRect(i,i*k+prey-k*prex,10,10);
                            }
                        }
                        prex=e.clientX-480;
                        prey=e.clientY-260;
                    }
                }

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

源码下载  

在线演示