HTML5 實現橡皮擦的擦除效果

　　聲明：本文爲原創文章，如需轉載，請註明來源WAxes，謝謝！

　　最近項目恰好用到這種效果，也就是有點像刮刮卡同樣，在移動設備上，把某張圖片刮掉顯示出另外一張圖片。效果圖以下：

　　 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;

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

var hastouch = "ontouchstart" in window?true:false,//判斷是否爲移動設備
    tapstart = hastouch?"touchstart":"mousedown",
    tapmove = hastouch?"touchmove":"mousemove",
    tapend = hastouch?"touchend":"mouseup";

canvas.addEventListener(tapstart , function(e){
    e.preventDefault();
    
    x1 = hastouch?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft;
    y1 = hastouch?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop;
    
　　//鼠標第一次點下的時候擦除一個圓形區域，同時記錄第一個座標點
    ctx.save()
    ctx.beginPath()
    ctx.arc(x1,y1,a,0,2*Math.PI);
    ctx.clip()
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.restore();
    
    canvas.addEventListener(tapmove , tapmoveHandler);
    canvas.addEventListener(tapend , function(){
        canvas.removeEventListener(tapmove , tapmoveHandler);
    });
　　//鼠標移動時觸發該事件
    function tapmoveHandler(e){
        e.preventDefault()
        x2 = hastouch?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft;
        y2 = hastouch?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop;
        
　　　　//獲取兩個點之間的剪輯區域四個端點
        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;
        
　　　　//保證線條的連貫，因此在矩形一端畫圓
        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();
    
　　　　//清除矩形剪輯區域裏的像素
        ctx.save()
        ctx.beginPath()
        ctx.moveTo(x3,y3);
        ctx.lineTo(x5,y5);
        ctx.lineTo(x6,y6);
        ctx.lineTo(x4,y4);
        ctx.closePath();
        ctx.clip()
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.restore();
        
　　　　//記錄最後座標
        x1 = x2;
        y1 = y2;
    }
})

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

var imgData = ctx.getImageData(0,0,canvas.width,canvas.height);
var dd = 0;
for(var x=0;x<imgData.width;x+=1){
    for(var y=0;y<imgData.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<imgData.width;x+=30){
        for(var y=0;y<imgData.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上運行應該也會流暢不少，下面是修改後的代碼：

//經過修改globalCompositeOperation來達到擦除的效果
function tapClip(){
    var hastouch = "ontouchstart" in window?true:false,
        tapstart = hastouch?"touchstart":"mousedown",
        tapmove = hastouch?"touchmove":"mousemove",
        tapend = hastouch?"touchend":"mouseup";
    
    canvas.addEventListener(tapstart , function(e){
　　　　 clearTimeout(timeout)
        e.preventDefault();
        
        x1 = hastouch?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft;
        y1 = hastouch?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop;
        
        ctx.lineCap = "round";　　//設置線條兩端爲圓弧
        ctx.lineJoin = "round";　　//設置線條轉折爲圓弧
        ctx.lineWidth = a*2;　　
        ctx.globalCompositeOperation = "destination-out";
        
        ctx.save();
        ctx.beginPath()
        ctx.arc(x1,y1,1,0,2*Math.PI);
        ctx.fill();
        ctx.restore();
        
        canvas.addEventListener(tapmove , tapmoveHandler);
        canvas.addEventListener(tapend , function(){
            canvas.removeEventListener(tapmove , tapmoveHandler);
            
　　　　　　　timeout = setTimeout(function(){
            var imgData = ctx.getImageData(0,0,canvas.width,canvas.height);
            var dd = 0;
            for(var x=0;x<imgData.width;x+=30){
                for(var y=0;y<imgData.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)
        });
        function tapmoveHandler(e){
            e.preventDefault()
            x2 = hastouch?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft;
            y2 = hastouch?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop;
            
            ctx.save();
            ctx.moveTo(x1,y1);
            ctx.lineTo(x2,y2);
            ctx.stroke();
            ctx.restore()
            
            x1 = x2;
            y1 = y2;
        }
    })
}

　　擦除那部分代碼就這麼一點，也就至關於畫圖功能，直接設置line屬性後經過lineTo進行繪製線條，只要事前把globalCompositeOperation設成destination-out，你所進行的一切繪製，都變成了擦除效果。鼠標滑動觸發的事件裏面代碼也少了不少，繪圖對象的調用次數減小了，計算也減小了，性能提高大大滴。

　　改好代碼後就當即用本身的android機子測試了一下，果真如此，跟上一個相比，流暢了不少，至少達到了客戶要求的能玩的地步了。

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