詳解HTML5實現橡皮擦的擦除效果的範例程式碼（圖）

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

　　 DEMO請戳右：DEMO  

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

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

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

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

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

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

　　

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

　　

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

var asin = a*Math.sin(Math.atan((y2-y1)/(x2-x1)));
var acos = a*Math.cos(Math.atan((y2-y1)/(x2-x1)))
var x3 = x1+asin;var y3 = y1-acos;
var x4 = x1-asin;
var y4 = y1+acos;
var x5 = x2+asin;var y5 = y2-acos;
var x6 = x2-asin;var y6 = y2+acos;

　　x1、y1和x2、y2就是兩個端點，從而求出了四個端點的座標。這樣一來，剪輯區域就是圈加矩形，程式碼組織起來就是：

 hastouch = "ontouchstart"  
 window?:= hastouch?"touchstart":"mousedown"= 
 hastouch?"touchmove":"mousemove"= 
 hastouch?"touchend":"mouseup"= hastouch?e.targetTouches[0].pageX:e.clientX-= 
 hastouch?e.targetTouches[0].pageY:e.clientY-0,2*0,0= hastouch?e.targetTouches[0].pageX:e.clientX-= 
 hastouch?e.targetTouches[0].pageY:e.clientY- asin = a*Math.sin(Math.atan((y2-y1)/(x2-x1)));         
 acos = a*Math.cos(Math.atan((y2-y1)/(x2-x1)))         
 x3 = x1+ y3 = y1- x4 = x1- y4 = y1+ x5 = x2+ y5 = y2- x6 = x2- y6 = y2+0,2*0,00,0==

　　如此一來，滑鼠擦除的效果就實現了，不過還有一個要實現的點，就是大部分擦除的效果，當你擦了一定數量的像素後，就會自動把所有圖片內容呈現出來，這個效果，我是用imgData來實現的。程式碼如下：

var imgData = ctx.getImageData(0,0,canvas.width,canvas.height);
var dd = 0;
for(var x=0;x<img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/194/b3254365e902d656c3d36935a2f0dd1c-3.jpg?x-oss-process=image/resize,p_40"  class="lazy" Data.width;x+=1){    
for(var y=0;y<img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/194/b3254365e902d656c3d36935a2f0dd1c-3.jpg?x-oss-process=image/resize,p_40"  class="lazy" Data.height;y+=1){        
var i = (y*imgData.width + x)*4;        
if(imgData.data[i+3] > 0){
            dd++
        }
    }
}if(dd/(imgData.width*imgData.height)<0.4){
    canvas.className = "noOp";
}

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

　　此处注意，我是把检查像素这段代码方法mouseup事件里面的，因为这个计算量相对来说还是不小，如果用户狂点鼠标，就会狂触发mouseup事件，也就是会疯狂的触发那个循环计算像素，计算量大到阻塞进程，导致界面卡住的情况，缓解办法如下：加个timeout，延迟执行像素计算，而在每一次点击的时候再清除timeout，也就是如果用户点击很快，这个计算也就触发不了了，还有一个提升的办法就是抽样检查，我上面的写法是逐个像素检查，逐个像素检查的话像素量太大，肯定会卡的，所以可以采用抽样检查，比如每隔30个像素检查一次，修改后的代码如下：

timeout = setTimeout(function(){    
var imgData = ctx.getImageData(0,0,canvas.width,canvas.height);    
var dd = 0;    
for(var x=0;x<img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/194/b3254365e902d656c3d36935a2f0dd1c-3.jpg?x-oss-process=image/resize,p_40"  class="lazy" Data.width;x+=30){        
for(var y=0;y<img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/194/b3254365e902d656c3d36935a2f0dd1c-3.jpg?x-oss-process=image/resize,p_40"  class="lazy" Data.height;y+=30){            
var i = (y*imgData.width + x)*4;            
if(imgData.data[i+3] >0){
                dd++
            }
        }
    }    if(dd/(imgData.width*imgData.height/900)<0.4){
        canvas.className = "noOp";
    }
},100)

　　这样就可以较大限度的防止用户狂点击了，如果有其他更好的检查方法欢迎给出意见，谢谢。

　　到了这一步就都写完了，然后就是测试的时候了，结果并不乐观，在android上还是卡啊卡啊，所以又得另想办法，最终发现了绘图环境中的globalCompositeOperation这个属性，这个属性的默认值是source-over，也就是，当你在已有像素上进行绘图时会叠加，但是还有一个属性是destination-out，官方解释就是：在源图像外显示目标图像。只有源图像外的目标图像部分才会被显示，源图像是透明的。好像不太好理解，但是其实自己测试一下就会发现很简单，也就是在已有像素的基础上进行绘图时，你绘制的区域里的已有像素都会被置为透明，直接看张图更容易理解：

　　  globalCompositeOperation属性效果图解。

　　有了这个属性后，就意味着不需要用到clip，也就不需要用sin、cos什么的计算剪辑区域，直接用条粗线就行了，这样一来就能够很大限度的降低了计算量，同时减少了绘图环境API的调用，性能提升了，在android上运行应该也会流畅很多，下面是修改后的代码：

 hastouch = "ontouchstart"  window?:= hastouch?"touchstart":"mousedown"= hastouch?"touchmove":"mousemove"= hastouch?"touchend":"mouseup"= 
 hastouch?e.targetTouches[0].pageX:e.clientX-= hastouch?e.targetTouches[0].pageY:e.clientY-= "round"= "round"= a*2= "destination-out"1,0,2* 
 imgData = ctx.getImageData(0,0 dd = 0( x=0;x<imgData.width;x+=30( 
 y=0;y<img Data.height;y+=30 i = (y*imgData.width + x)*4(imgData.data[i+3]  alt="詳解HTML5實現橡皮擦的擦除效果的範例程式碼（圖）" > 0++(dd/(imgData.width*imgData.height/900)<0.4){
                canvas.className = "noOp"= hastouch?e.targetTouches[0].pageX:e.clientX-= hastouch?e.targetTouches[0].pageY:e.clientY-==

　　擦除那部分代码就这么一点，也就相当于画图功能，直接设置line属性后通过lineTo进行绘制线条，只要事前把globalCompositeOperation设成destination-out，你所进行的一切绘制，都变成了擦除效果。鼠标滑动触发的事件里面代码也少了很多，绘图对象的调用次数减少了，计算也减少了，性能提升大大滴。

　　改好代码后就立即用自己的android机子测试了一下，果然如此，跟上一个相比，流畅了很多，至少达到了客户要求的能玩的地步了。

以上是詳解HTML5實現橡皮擦的擦除效果的範例程式碼（圖）的詳細內容。更多資訊請關注PHP中文網其他相關文章！