自己實現一個刮刮樂

　　今天有看到一個園友發了一篇自己實現的刮刮了，感覺挺好玩的就下下來看看，結果運行不了，想想也不是太難就決定自己實現一個，還是花了點時間的，源碼下載鏈接在最下面（這個絕對有用，除非你的瀏覽器不支持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;
                    }
                }

 　　雖然說這個實現起來很簡單，但是效果還過得去。不過我想進一步實現一點東西就遇到了點問題，首先是這個東西怎么調還是會看到一點鋸齒的，再一個是怎樣識別你已經刮完了（考慮過識別已經划過的點，但是感覺這個不太好），所以希望有解決方法的園友賜教。

源碼下載  

在線演示