用HTML5 實現橡皮擦的塗抹效果的教學_html5教學技巧

最近專案剛好用到這種效果，也就是有點像刮刮卡一樣，在行動裝置上，把某張圖片刮掉顯示出另一張圖片。效果圖如下：

DEMO請戳右：DEMO 
這種在網路上還是挺常見的，本來就想直接上網找個demo套用下他的方法就行了，套用了才發現，在android上卡出翔了，因為客戶要求，在android不要求特別流暢，至少要能玩，但是網上找的那個demo實在太卡，根本就是沒辦法玩的情況。於是就想自己寫一個算了，本文也就權當記錄研究過程。

　　這種刮圖的效果，首先想到就是用HTML5的canvas來實現，而canvas的API中，可以清除像素的就是clearRect方法，但是clearRect方法的清除區域矩形​​，畢竟大部分人的習慣中的橡皮擦都是圓形的，所以就引入了剪輯區域這個強大的功能，也就是clip方法。用法很簡單：　

XML/HTML Code複製內容到剪貼簿

1. ctx.save()   
2. ctx.beginPath()   
3. ctx.arc(x2,y2,a,0,2*Math.PI);   
4. ctx.clip()   
5. ctx.clearRect(0,0,canvas.width,canvas.height);   
6. ctx.restore();   

　　上面那段程式碼就實現了圓形區域的擦除，也就是先實作一個圓形路徑，然後把這個路徑當作剪輯區域，再清除像素就行了。有個注意點就是需要先保存繪圖環境，清除完像素後要重置繪圖環境，如果不重置的話以後的繪圖都是會被限制在那個剪輯區域中。

　　擦除效果有了，現在就是寫滑鼠移動擦除的效果了，下面我均用滑鼠來描述，因為行動端也差不多，就是把mousedown換成touchstart，mousemove換成touchmove，mouseup換成touchend 、以及取得座標點由e.clientX換成e.targetTouches[0].pageX而已。

　　實現滑鼠移動擦除，剛開始就是想到滑鼠移動時在觸發的mousemove事件中對滑鼠所在位置進行圓形區域擦除，寫出來後發現，當滑鼠移動速度很快的時候，擦除的區域就不連貫了，就會出現下面這種效果，這顯然不是我們想要的橡皮擦擦除效果。

既然所有點不連貫，那接下來要做的事就是把這些點連貫起來，如果是實現畫圖功能的話，就可以直接通過lineTo把兩點之間連接起來再繪製，但是擦除效果中的剪輯區域要求要是閉合路徑，如果是單純的把兩點連起來就無法形成剪輯區域了。然後我就想到用計算的方法，算出兩個擦除區域中的矩形四個端點座標來實現，也就是下圖中的紅色矩形：

計算方法也很簡單，因為可以知道兩個剪輯區域連線兩個端點的座標，又知道我們要多寬的線條，矩形的四個端點座標就變得容易求了，所以就有了下面的程式碼：
XML/HTML Code複製內容到剪貼簿

1. var aasin = a*Math.sin(Math.atan((y2-y1)/(x2-. x1)));   
2. var aacos = a*Math.cos(Math.atan((y2-y1)/(x2-x1)) )   
3. var x3 = x1 asin;  x1
4. asin;   var y3 = y1
5. -acos;   var x4 = x1
6. -asin;   var y4 = y1
acos;  
7. y1 acos;   var x5 = 
8. x2 asin;  x2 asin;   var 
y5
9.  = y2-acos;  -acos;  
10. var x6 = x2-asin;  

var 

y6 = y2 acos;

　　x1、y1和x2、y2就是兩個端點，從而求出了四個端點的座標。這樣一來，剪輯區域就是圈加矩形，程式碼組織起來就是：
XML/HTML Code複製內容到剪貼簿

1. var hastouch = "ontouchstart" .為行動裝置  
2.     tapstart = hastouch?"touch     
3. tapmove = hastouch?"touchmove     tapend
4.  = hastouch?"touchend":?"touchend"    canvas.addEventListener(tapstart , function(e){   
5.     e.preventDefault();   
6.        
7.     
8. x1 = 
9. hastouch?e.. ;        y1 = 
10. hastouch?e.. ;            　　//滑鼠第一次點下的時候擦除一個圓形區域，同時記錄第一個座標點   
11.     ctx.save()   
12.     ctx.beginPath()   
13.     ctx.arc(x1,y1,a,0,2*Math.PI);   
14.     ctx.clip()   
15.     ctx.clearRect(0,0,canvas.width,canvas.height);   
16.     ctx.restore();   
17.        
18.     canvas.addEventListener(tapmove , tapmoveHandler);   
19.     canvas.addEventListener(tapend , function(){   
20.         canvas.removeEventListener(tapmove , tapmoveHandler);   
21.     });   
22. 　　//老鼠移動時觸發此事件   
23.     function tapmoveHandler(e){   
24.         e.preventDefault()   
25.         x2 = hastouchLe. ;   
26.         y2 = hastouch?e. ;   
27.            
28. 　　　　//取得兩個點之間的剪輯區域四個端點   
29.         var aasin = a*Math.sin(Math.atan(y = a*Math.sin(Math. );   
30.         var aacos = a*Math.cos(Math.atan(y
 = a*Math.cos(Math.at12x2x )   
31.         var x3 =         var 
32. y3 = y1 = y1        var 
33. x4 = x1 = x1        var 
34. y4 =         var x5 = 
35.         var y5 = y2 = 
        var 
36. x6 = x2 = x2
        var 
37. y6 = 
            　　　　//保證線的連貫，所以在長方形一端畫圓   
38.         ctx.save()            ctx.beginPath()            ctx.arc(x2,y2,a,0,2*Math.PI);   
39.         ctx.clip()   
40.         ctx.clearRect(0,0,canvas.width,canvas.height);   
41.         ctx.restore();   
42.        
43. 　　　　//清除矩形剪輯區域裡的像素   
44.         ctx.save()   
45.         ctx.beginPath()   
46.         ctx.moveTo(x3,y3);   
47.         ctx.lineTo(x5,y5);   
48.         ctx.lineTo(x6,y6);   
50.         ctx.lineTo(x4,y4);   
51.         ctx.closePath();   
52.         ctx.clip()   
53.         ctx.clearRect(0,0,canvas.width,canvas.height);   
54.         ctx.restore();   
55.            
56. 　　　　//記錄最後座標   
57.         x1 = x2;
        
58. y1 = y2;     }   
59. })  
　　如此一來，滑鼠擦除的效果就實現了，不過還有一個要實現的點，就是大部分擦除的效果，當你擦了一定數量的像素後，就會自動把所有圖片內容呈現出來，這個效果，我是用imgData來實現的。程式碼如下：

複製程式碼

XML/HTML Code

複製內容到剪貼簿

var 

1. imgData = ctx.getImmmageData(w,0cancanvas. height);    var 
dd
2.  = 0;   ;   
;   
3. ;    for(var x=0;x
0
4. ;ximgData.width;x =1){        for(var y=0
;
5. 0; >imgData.height;y =1){   
6.         var i = (y*imgData.width   x)*4  = (y*imgData.width   x)*4  = (y*imgData.
        if(imgData.data[i 3] 
7. >
 0){   
8.  0){   
9.             dd   
10.         }   
11.     }    }   
12. if(dd/(imgData.width*imgData.height)0.4){   ){   
13.     

canvas.className

 = "noOp"; }  

　　取得到imgData，對imgData裡的像素進行遍歷，然後再對imgData的data數組裡的rgba中的alpha進行分析，也就是分析透明度，如果像素被擦除了，那麼透明度就是0了，也就是把目前畫布中透明度不為0的像素的數量跟畫布總像素數進行比較，如果透明度不為0 的像素數比例低於40%，那表示當前畫布上就以後有百分六十以上的區域被擦除了，就可以自動呈現圖片了。

　　這裡注意，我是把檢查像素這段程式碼方法mouseup事件裡面的，因為這個計算量相對來說還是不小，如果用戶狂點滑鼠，就會狂觸發mouseup事件，也就是會瘋狂的觸發那個循環計算像素，計算量大到阻塞進程，導致界面卡住的情況，緩解辦法如下：加個timeout，延遲執行像素計算，而在每一次點擊的時候再清除timeout，也就是如果用戶點擊很快，這個計算也就觸發不了了，還有一個提升的辦法就是抽樣檢查，我上面的寫法是逐個像素檢查，逐個像素檢查的話像素量太大，肯定會卡的，所以可以採用抽樣檢查，比如每隔30個像素檢查一次，修改後的程式碼如下：
複製程式碼

XML/HTML Code複製內容到剪貼簿

1. timeout = setTimeout(function(){   
2.     var imgData = ctx。
3.     var dd = 0;  >0
4. ;   ;     for(var x=0;x0; >imgData.width
5. ;x =30){            for(var y=0=0 imgData.height
;y =30){   
6.             var i
 = (y*imgData.width  
7.             if(imgData.data[i 3] >0){   >
8. 0){   
9.                 dd   
10.             }   
11.         }   
12.     }        if(dd/(imgData.width*imgData.height/900)0.4
13. 0.4
        
14. canvas.className
 = 
    }   

},100)   

　　這樣就可以較大限度的防止用戶狂點擊了，如果有其他更好的檢查方法歡迎給出意見，謝謝。

　　到了這一步就都寫完了，然後就是測試的時候了，結果並不樂觀，在android上還是卡啊卡啊，所以又得另想辦法，最終發現了繪圖環境中的globalCompositeOperation這個屬性，這個屬性的預設值是source-over，也就是，當你在已有像素上進行繪圖時會疊加，但是還有一個屬性是destination-out，官方解釋就是：在來源影像外顯示目標影像。只有來源影像外的目標影像部分才會被顯示，來源影像是透明的。好像不太好理解，但是其實自己測試一下就會發現很簡單，也就是在已有像素的基礎上進行繪圖時，你繪製的區域裡的已有像素都會被置為透明，直接看張圖更容易理解：

globalCompositeOperation屬性效果圖解。
有了這個屬性後，就意味著不需要用到clip，也就不需要用sin、cos什麼的計算剪輯區域，直接用條粗線就行了，這樣一來就能夠很大限度的降低了運算量，同時減少了繪圖環境API的調用，效能提升了，在android上運行應該也會流暢很多，以下是修改後的程式碼：

XML/HTML Code複製內容到剪貼簿

1. //透過修改globalCompositeOperation來達到擦除的效果   
2. function tapClip(){   
3.     var hastouch = "ontouchstart""ontouchstart"
4.         tapstart = hastouch = 
5. hastouch =          tapmove = 
hastouch
6.  = hastouch        tapend = 
hastouch
7.  = hastouch
       
8.     canvas.addEventListener(tapstart , function(e){   
9. 　　　　 clearTimeout(timeout)   
10.         e.preventDefault();   
11.                     x1 = 
hastouch
12. ;            y1 = hastouch
13. ?e. ;   
14.                     ctx.lineCap = "round"
 = 
15. "round" = "round" = "round" = "round"
 = 
16. "r.         ctx.lineJoin = 
17.         ctx.lineWidth = a        ctx.globalCompositeOperation
18.  =            
19.         ctx.save();   
20.         ctx.beginPath()   
21.         ctx.arc(x1,y1,1,0,2*Math.PI);   
22.         ctx.fill();   
23.         ctx.restore();   
24.            
25.         canvas.addEventListener(tapmove , tapmoveHandler);   
26.         canvas.addEventListener(tapend , function(){   
27.             canvas.removeEventListener(tapmove , tapmoveHandler);   
28.                
29. 　　　　　　　timeout = setTimeout = 
setTimeout = setTimeout             var imgData = ctx             var 
30. dd = 0 = 00;   
31.             for(var x=0;ximgData.width;x =30){   
32.                 for(var y=y= 🎜> imgData.height;y =30){   
                      var 
33. ii
34.                       if(imgData.data[i 3]                         dd   
35.                     }   
36.                 }   
37.             }   
38.             if(dd/(imgData.width*imgData.height/900)
39. 0.                 canvas.className = canvas.className
 =    
40.             }    100)   
        }）；   
41.         函數tapmoveHandler(e){   
42.             e.preventDefault()   
43.             x2 =              
44. y2 = hastouch =                 
45.             ctx.save();   
46.             ctx.moveTo(x1,y1);   
47.             ctx.lineTo(x2,y2);   
48.             ctx.中風();   
49.             ctx.restore()   
50.                
51.             
x1
52.  = x2 = x2;   
53.             y1 = y2 = y2
;   
        }   
    })   
}   

恐怖那部分代码就这么一点，非常虚拟画图功能，直接设置线属性后通过线进行不平等的线条，只要事前把globalCompositeOperation设定成destination-out，你所进行的一切的一切，都变成了有了效果。鼠标滑动触发的事件里面的代码也少了很多，绘图对象的调用次数减少了，计算也减少了，性能提升大大滴。

好的程式碼以後就立即用自己的android機子測試一下，果然如此，跟上一個相比，流暢了很多，至少達到了客戶要求的能玩的地步了。 位址原始碼：https://github.com/whxaxes/canvas-test/blob/gh-pages/src/Funny-demo/clip/clip.html