怎么用HTML5實(shí)現(xiàn)橡皮擦的涂抹效果

這篇文章主要講解了“怎么用HTML5實(shí)現(xiàn)橡皮擦的涂抹效果”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“怎么用HTML5實(shí)現(xiàn)橡皮擦的涂抹效果”吧！

最近項(xiàng)目剛好用到這種效果，也就是有點(diǎn)像刮刮卡一樣，在移動(dòng)設(shè)備上，把某張圖片刮掉顯示出另一張圖片。效果圖如下：

DEMO請(qǐng)戳右：DEMO 
這種在網(wǎng)上還是挺常見的，本來就想直接網(wǎng)上找個(gè)demo套用下他的方法就行了，套用了才發(fā)現(xiàn)，在android上卡出翔了，因?yàn)榭蛻粢?，在android不要求特別流暢，至少要能玩，但是網(wǎng)上找的那個(gè)demo實(shí)在太卡，根本就是沒法玩的情況。于是就想自己寫一個(gè)算了，本文也就權(quán)當(dāng)記錄一下研究過程。

　　這種刮圖的效果，首先想到就是用HTML5的canvas來實(shí)現(xiàn)，而canvas的API中，可以清除像素的就是clearRect方法，但是clearRect方法的清除區(qū)域矩形，畢竟大部分人的習(xí)慣中的橡皮擦都是圓形的，所以就引入了剪輯區(qū)域這個(gè)強(qiáng)大的功能，也就是clip方法。用法很簡(jiǎn)單：　

XML/HTML Code復(fù)制內(nèi)容到剪貼板

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();   

　　上面那段代碼就實(shí)現(xiàn)了圓形區(qū)域的擦除，也就是先實(shí)現(xiàn)一個(gè)圓形路徑，然后把這個(gè)路徑作為剪輯區(qū)域，再清除像素就行了。有個(gè)注意點(diǎn)就是需要先保存繪圖環(huán)境，清除完像素后要重置繪圖環(huán)境，如果不重置的話以后的繪圖都是會(huì)被限制在那個(gè)剪輯區(qū)域中。

　　擦除效果有了，現(xiàn)在就是寫鼠標(biāo)移動(dòng)擦除的效果了，下面我均用鼠標(biāo)來描述，因?yàn)橐苿?dòng)端也差不多，就是把mousedown換成touchstart，mousemove換成touchmove，mouseup換成touchend、以及獲取坐標(biāo)點(diǎn)由e.clientX換成e.targetTouches[0].pageX而已。

　　實(shí)現(xiàn)鼠標(biāo)移動(dòng)擦除，剛開始就是想到鼠標(biāo)移動(dòng)時(shí)在觸發(fā)的mousemove事件中對(duì)鼠標(biāo)所在位置進(jìn)行圓形區(qū)域擦除，寫出來后發(fā)現(xiàn)，當(dāng)鼠標(biāo)移動(dòng)速度很快的時(shí)候，擦除的區(qū)域就不連貫了，就會(huì)出現(xiàn)下面這種效果，這顯然不是我們想要的橡皮擦擦除效果。

既然所有點(diǎn)不連貫，那接下來要做的事就是把這些點(diǎn)連貫起來，如果是實(shí)現(xiàn)畫圖功能的話，就可以直接通過lineTo把兩點(diǎn)之間連接起來再繪制，但是擦除效果中的剪輯區(qū)域要求要是閉合路徑，如果是單純的把兩個(gè)點(diǎn)連起來就無法形成剪輯區(qū)域了。然后我就想到用計(jì)算的方法，算出兩個(gè)擦除區(qū)域中的矩形四個(gè)端點(diǎn)坐標(biāo)來實(shí)現(xiàn)，也就是下圖中的紅色矩形：

計(jì)算方法也很簡(jiǎn)單，因?yàn)榭梢灾纼蓚€(gè)剪輯區(qū)域連線兩個(gè)端點(diǎn)的坐標(biāo)，又知道我們要多寬的線條，矩形的四個(gè)端點(diǎn)坐標(biāo)就變得容易求了，所以就有了下面的代碼：
XML/HTML Code復(fù)制內(nèi)容到剪貼板

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;   

4. var y3 = y1-acos;   

5. var x4 = x1-asin;   

6. var y4 = y1+acos;   

7. var x5 = x2+asin;   

8. var y5 = y2-acos;   

9. var x6 = x2-asin;   

10. var y6 = y2+acos;   

　　x1、y1和x2、y2就是兩個(gè)端點(diǎn)，從而求出了四個(gè)端點(diǎn)的坐標(biāo)。這樣一來，剪輯區(qū)域就是圈加矩形，代碼組織起來就是：
XML/HTML Code復(fù)制內(nèi)容到剪貼板

1. var hastouch = "ontouchstart" in window?true:false,//判斷是否為移動(dòng)設(shè)備   

2.     tapstart = hastouch?"touchstart":"mousedown",   

3.     tapmove = hastouch?"touchmove":"mousemove",   

4.     tapend = hastouch?"touchend":"mouseup";   

5.   

6. canvas.addEventListener(tapstart , function(e){   

7.     e.preventDefault();   

8.        

9.     x1 = hastouch?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft;   

10.     y1 = hastouch?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop;   

11.        

12. 　　//鼠標(biāo)第一次點(diǎn)下的時(shí)候擦除一個(gè)圓形區(qū)域，同時(shí)記錄第一個(gè)坐標(biāo)點(diǎn)   

13.     ctx.save()   

14.     ctx.beginPath()   

15.     ctx.arc(x1,y1,a,0,2*Math.PI);   

16.     ctx.clip()   

17.     ctx.clearRect(0,0,canvas.width,canvas.height);   

18.     ctx.restore();   

19.        

20.     canvas.addEventListener(tapmove , tapmoveHandler);   

21.     canvas.addEventListener(tapend , function(){   

22.         canvas.removeEventListener(tapmove , tapmoveHandler);   

23.     });   

24. 　　//鼠標(biāo)移動(dòng)時(shí)觸發(fā)該事件   

25.     function tapmoveHandler(e){   

26.         e.preventDefault()   

27.         x2 = hastouch?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft;   

28.         y2 = hastouch?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop;   

29.            

30. 　　　　//獲取兩個(gè)點(diǎn)之間的剪輯區(qū)域四個(gè)端點(diǎn)   

31.         var aasin = a*Math.sin(Math.atan((y2-y1)/(x2-x1)));   

32.         var aacos = a*Math.cos(Math.atan((y2-y1)/(x2-x1)))   

33.         var x3 = x1+asin;   

34.         var y3 = y1-acos;   

35.         var x4 = x1-asin;   

36.         var y4 = y1+acos;   

37.         var x5 = x2+asin;   

38.         var y5 = y2-acos;   

39.         var x6 = x2-asin;   

40.         var y6 = y2+acos;   

41.            

42. 　　　　//保證線條的連貫，所以在矩形一端畫圓   

43.         ctx.save()   

44.         ctx.beginPath()   

45.         ctx.arc(x2,y2,a,0,2*Math.PI);   

46.         ctx.clip()   

47.         ctx.clearRect(0,0,canvas.width,canvas.height);   

48.         ctx.restore();   

49.        

50. 　　　　//清除矩形剪輯區(qū)域里的像素   

51.         ctx.save()   

52.         ctx.beginPath()   

53.         ctx.moveTo(x3,y3);   

54.         ctx.lineTo(x5,y5);   

55.         ctx.lineTo(x6,y6);   

56.         ctx.lineTo(x4,y4);   

57.         ctx.closePath();   

58.         ctx.clip()   

59.         ctx.clearRect(0,0,canvas.width,canvas.height);   

60.         ctx.restore();   

61.            

62. 　　　　//記錄最后坐標(biāo)   

63.         x1 = x2;   

64.         y1 = y2;   

65.     }   

66. })  

　　如此一來，鼠標(biāo)擦除的效果就實(shí)現(xiàn)了，不過還有一個(gè)要實(shí)現(xiàn)的點(diǎn)，就是大部分擦除的效果，當(dāng)你擦了一定數(shù)量的像素后，就會(huì)自動(dòng)把所有圖片內(nèi)容呈現(xiàn)出來，這個(gè)效果，我是用imgData來實(shí)現(xiàn)的。代碼如下：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1. var imgData = ctx.getImageData(0,0,canvas.width,canvas.height);   

2. var dd = 0;   

3. for(var x=0;x<imgData.width;x+=1){   

4.     for(var y=0;y<imgData.height;y+=1){   

5.         var i = (y*imgData.width + x)*4;   

6.         if(imgData.data[i+3] > 0){   

7.             dd++   

8.         }   

9.     }   

10. }   

11. if(dd/(imgData.width*imgData.height)<0.4){   

12.     canvas.className = "noOp";   

13. }  

　　獲取到imgData，對(duì)imgData里的像素進(jìn)行遍歷，然后再對(duì)imgData的data數(shù)組里的rgba中的alpha進(jìn)行分析，也就是分析透明度，如果像素被擦除了，那透明度就是0了，也就是把當(dāng)前畫布中透明度不為0的像素的數(shù)量跟畫布總像素?cái)?shù)進(jìn)行比較，如果透明度不為0 的像素?cái)?shù)比例低于40%，那說明當(dāng)前畫布上就以后有百分六十以上的區(qū)域被擦除了，就可以自動(dòng)呈現(xiàn)圖片了。

　　此處注意，我是把檢查像素這段代碼方法mouseup事件里面的，因?yàn)檫@個(gè)計(jì)算量相對(duì)來說還是不小，如果用戶狂點(diǎn)鼠標(biāo)，就會(huì)狂觸發(fā)mouseup事件，也就是會(huì)瘋狂的觸發(fā)那個(gè)循環(huán)計(jì)算像素，計(jì)算量大到阻塞進(jìn)程，導(dǎo)致界面卡住的情況，緩解辦法如下：加個(gè)timeout，延遲執(zhí)行像素計(jì)算，而在每一次點(diǎn)擊的時(shí)候再清除timeout，也就是如果用戶點(diǎn)擊很快，這個(gè)計(jì)算也就觸發(fā)不了了，還有一個(gè)提升的辦法就是抽樣檢查，我上面的寫法是逐個(gè)像素檢查，逐個(gè)像素檢查的話像素量太大，肯定會(huì)卡的，所以可以采用抽樣檢查，比如每隔30個(gè)像素檢查一次，修改后的代碼如下：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1. timeout = setTimeout(function(){   

2.     var imgData = ctx.getImageData(0,0,canvas.width,canvas.height);   

3.     var dd = 0;   

4.     for(var x=0;x<imgData.width;x+=30){   

5.         for(var y=0;y<imgData.height;y+=30){   

6.             var i = (y*imgData.width + x)*4;   

7.             if(imgData.data[i+3] >0){   

8.                 dd++   

9.             }   

10.         }   

11.     }   

12.     if(dd/(imgData.width*imgData.height/900)<0.4){   

13.         canvas.className = "noOp";   

14.     }   

15. },100)   

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

　　到了這一步就都寫完了，然后就是測(cè)試的時(shí)候了，結(jié)果并不樂觀，在android上還是卡啊卡啊，所以又得另想辦法，最終發(fā)現(xiàn)了繪圖環(huán)境中的globalCompositeOperation這個(gè)屬性，這個(gè)屬性的默認(rèn)值是source-over，也就是，當(dāng)你在已有像素上進(jìn)行繪圖時(shí)會(huì)疊加，但是還有一個(gè)屬性是destination-out，官方解釋就是：在源圖像外顯示目標(biāo)圖像。只有源圖像外的目標(biāo)圖像部分才會(huì)被顯示，源圖像是透明的。好像不太好理解，但是其實(shí)自己測(cè)試一下就會(huì)發(fā)現(xiàn)很簡(jiǎn)單，也就是在已有像素的基礎(chǔ)上進(jìn)行繪圖時(shí)，你繪制的區(qū)域里的已有像素都會(huì)被置為透明，直接看張圖更容易理解：

globalCompositeOperation屬性效果圖解。
有了這個(gè)屬性后，就意味著不需要用到clip，也就不需要用sin、cos什么的計(jì)算剪輯區(qū)域，直接用條粗線就行了，這樣一來就能夠很大限度的降低了計(jì)算量，同時(shí)減少了繪圖環(huán)境API的調(diào)用，性能提升了，在android上運(yùn)行應(yīng)該也會(huì)流暢很多，下面是修改后的代碼：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1. //通過修改globalCompositeOperation來達(dá)到擦除的效果   

2. function tapClip(){   

3.     var hastouch = "ontouchstart" in window?true:false,   

4.         tapstart = hastouch?"touchstart":"mousedown",   

5.         tapmove = hastouch?"touchmove":"mousemove",   

6.         tapend = hastouch?"touchend":"mouseup";   

7.        

8.     canvas.addEventListener(tapstart , function(e){   

9. 　　　　 clearTimeout(timeout)   

10.         e.preventDefault();   

11.            

12.         x1 = hastouch?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft;   

13.         y1 = hastouch?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop;   

14.            

15.         ctx.lineCap = "round";　　//設(shè)置線條兩端為圓弧   

16.         ctx.lineJoin = "round";　　//設(shè)置線條轉(zhuǎn)折為圓弧   

17.         ctx.lineWidth = a*2;　　   

18.         ctx.globalCompositeOperation = "destination-out";   

19.            

20.         ctx.save();   

21.         ctx.beginPath()   

22.         ctx.arc(x1,y1,1,0,2*Math.PI);   

23.         ctx.fill();   

24.         ctx.restore();   

25.            

26.         canvas.addEventListener(tapmove , tapmoveHandler);   

27.         canvas.addEventListener(tapend , function(){   

28.             canvas.removeEventListener(tapmove , tapmoveHandler);   

29.                

30. 　　　　　　　timeout = setTimeout(function(){   

31.             var imgData = ctx.getImageData(0,0,canvas.width,canvas.height);   

32.             var dd = 0;   

33.             for(var x=0;x<imgData.width;x+=30){   

34.                 for(var y=0;y<imgData.height;y+=30){   

35.                     var i = (y*imgData.width + x)*4;   

36.                     if(imgData.data[i+3] > 0){   

37.                         dd++   

38.                     }   

39.                 }   

40.             }   

41.             if(dd/(imgData.width*imgData.height/900)<0.4){   

42.                 canvas.className = "noOp";   

43.             }   

44. 　　　　　　　},100)   

45.         });   

46.         function tapmoveHandler(e){   

47.             e.preventDefault()   

48.             x2 = hastouch?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft;   

49.             y2 = hastouch?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop;   

50.                

51.             ctx.save();   

52.             ctx.moveTo(x1,y1);   

53.             ctx.lineTo(x2,y2);   

54.             ctx.stroke();   

55.             ctx.restore()   

56.                

57.             x1 = x2;   

58.             y1 = y2;   

59.         }   

60.     })   

61. }   

　　擦除那部分代碼就這么一點(diǎn)，也就相當(dāng)于畫圖功能，直接設(shè)置line屬性后通過lineTo進(jìn)行繪制線條，只要事前把globalCompositeOperation設(shè)成destination-out，你所進(jìn)行的一切繪制，都變成了擦除效果。鼠標(biāo)滑動(dòng)觸發(fā)的事件里面代碼也少了很多，繪圖對(duì)象的調(diào)用次數(shù)減少了，計(jì)算也減少了，性能提升大大滴。

　　改好代碼后就立即用自己的android機(jī)子測(cè)試了一下，果然如此，跟上一個(gè)相比，流暢了很多，至少達(dá)到了客戶要求的能玩的地步了。

　　源碼地址：https://github.com/whxaxes/canvas-test/blob/gh-pages/src/Funny-demo/clip/clip.html

感謝各位的閱讀，以上就是“怎么用HTML5實(shí)現(xiàn)橡皮擦的涂抹效果”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)怎么用HTML5實(shí)現(xiàn)橡皮擦的涂抹效果這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！