最近專案剛好用到這種效果，也就是有點像刮刮卡一樣，在移動裝置上，把某張刮掉顯示出另一張。效果圖如下：
demo請戳右：demo
這種在網上還是挺常見的，本來就想直接網上找個demo套用下他的方法就行了，套用了才發現，在android上卡出翔了，因為客戶要求，在android不要求特別流暢，至少要能玩，但是網上找的那個demo實在太卡，根本就是沒法玩的情況。於是就想自己寫乙個算了，本文也就權當記錄一下研究過程。
這種刮圖的效果，首先想到就是用html5的canvas來實現，而canvas的api中，可以清除畫素的就是clearrect方法，但是clearrect方法的清除區域矩形，畢竟大部分人的習慣中的橡皮擦都是圓形的，所以就引入了剪輯區域這個強大的功能，也就是clip方法。用法很簡單：
xml/html code複製內容到剪貼簿
上面那段**就實現了圓形區域的擦除，也就是先實現乙個圓形路徑，然後把這個路徑作為剪輯區域，再清除畫素就行了。有個注意點就是需要先儲存繪圖環境，清除完畫素後要重置繪圖環境，如果不重置的話以後的繪圖都是會被限制在那個剪輯區域中。
擦除效果有了，現在就是寫滑鼠移動擦除的效果了，下面我均用滑鼠來描述，因為移動端也差不多，就是把mousedown換成touchstart，mousemove換成touchmove，mouseup換成touchend、以及獲取座標點由e.clientx換成e.targettouches[0].pagex而已。
實現滑鼠移動擦除，剛開始就是想到滑鼠移動時在觸發的mousemove事件中對滑鼠所在位置進行圓形區域擦除，寫出來後發現，當滑鼠移動速度很快的時候，擦除的區域就不連貫了，就會出現下面這種效果，這顯然不是我們想要的橡皮擦擦除效果。
既然所有點不連貫，那接下來要做的事就是把這些點連貫起來，如果是實現畫圖功能的話，就可以直接通過lineto把兩點之間連線起來再繪製，但是擦除效果中的剪輯區域要求要是閉合路徑，如果是單純的把兩個點連起來就無法形成剪輯區域了。然後我就想到用計算的方法，算出兩個擦除區域中的矩形四個端點座標來實現，也就是下圖中的紅色矩形：
計算方法也很簡單，因為可以知道兩個剪輯區域連線兩個端點的座標，又知道我們要多寬的線條，矩形的四個端點座標就變得容易求了，所以就有了下面的**：
xml/html code複製內容到剪貼簿
x1、y1和x2、y2就是兩個端點，從而求出了四個端點的座標。這樣一來，剪輯區域就是圈加矩形，**組織起來就是：
xml/html code複製內容到剪貼簿
如此一來，滑鼠擦除的效果就實現了，不過還有乙個要實現的點，就是大部分擦除的效果，當你擦了一定數量的畫素後，就會自動把所有內容呈現出來，這個效果，我是用imgdata來實現的。**如下：
複製**
xml/html code複製內容到剪貼簿
獲取到imgdata，對imgdata裡的畫素進行遍歷，然後再對imgdata的data陣列裡的rgba中的alpha進行分析，也就是分析透明度，如果畫素被擦除了，那透明度就是0了，也就是把當前畫布中透明度不為0的畫素的數量跟畫布總畫素數進行比較，如果透明度不為0 的畫素數比例低於40%，那說明當前畫布上就以後有百分六十以上的區域被擦除了，就可以自動呈現了。
此處注意，我是把檢查畫素這段**方法mouseup事件裡面的，因為這個計算量相對來說還是不小，如果使用者狂點滑鼠，就會狂觸發mouseup事件，也就是會瘋狂的觸發那個迴圈計算畫素，計算量大到阻塞程序，導致介面卡住的情況，緩解辦法如下：加個timeout，延遲執行畫素計算，而在每一次點選的時候再清除timeout，也就是如果使用者點選很快，這個計算也就觸發不了了，還有乙個提公升的辦法就是抽樣檢查，我上面的寫法是逐個畫素檢查，逐個畫素檢查的話畫素量太大，肯定會卡的，所以可以採用抽樣檢查，比如每隔30個畫素檢查一次，修改後的**如下：
複製**
xml/html code複製內容到剪貼簿
這樣就可以較大限度的防止使用者狂點選了，如果有其他更好的檢查方法歡迎給出意見，謝謝。
到了這一步就都寫完了，然後就是測試的時候了，結果並不樂觀，在android上還是卡啊卡啊，所以又得另想辦法，最終發現了繪圖環境中的globalcompositeoperation這個屬性，這個屬性的預設值是source-over，也就是，當你在已有畫素上進行繪圖時會疊加，但是還有乙個屬性是destination-out，官方解釋就是：在源影象外顯示目標影象。只有源影象外的目標影象部分才會被顯示，源影象是透明的。好像不太好理解，但是其實自己測試一下就會發現很簡單，也就是在已有畫素的基礎上進行繪圖時，你繪製的區域裡的已有畫素都會被置為透明，直接看張圖更容易理解：
globalcompositeoperation屬性效果**。
有了這個屬性後，就意味著不需要用到clip，也就不需要用sin、cos什麼的計算剪輯區域，直接用條粗線就行了，這樣一來就能夠很大限度的降低了計算量，同時減少了繪圖環境api的呼叫，效能提公升了，在android上執行應該也會流暢很多，下面是修改後的**：
xml/html code複製內容到剪貼簿
擦除那部分**就這麼一點，也就相當於畫圖功能，直接設定line屬性後通過lineto進行繪製線條，只要事前把globalcompositeoperation設成destination-out，你所進行的一切繪製，都變成了擦除效果。滑鼠滑動觸發的事件裡面**也少了很多，繪圖物件的呼叫次數減少了，計算也減少了，效能提公升大大滴。
改好**後就立即用自己的android機子測試了一下，果然如此，跟上乙個相比，流暢了很多，至少達到了客戶要求的能玩的地步了。
原始碼位址：
本文標題: 用html5 實現橡皮擦的塗抹效果的教程
本文位址:
HTML5 拖拽複製功能的實現
拖拽是一種常見的特性，即抓取物件以後拖到另乙個位置。在 html5 中，拖拽是標準的一部分，任何元素都能夠拖拽。html5拖拽非常常見的乙個功能，但是大部分拖拽的案例都是乙個剪下的過程，專案中需要實現html5拖拽複製的功能，html5拖拽複製很簡單，只需要在普通html5拖拽的過程中做一點小小的改...
用HTML5實現十里桃花歌詞的列印（一）
共自己之後複習 說明 white space pre wrap 按照粘來的的格式顯示 width 600px margin auto 外邊距自動 中間 height 799px 高度 background url pg.png 背景圖 padding top 100px 內上邊距 padding l...
用html5製作自己的課程表
用html5製作自己的課程表 2 width 80 align center bgcolor fff0ff cellpadding 7 cellspacing 7 font size 30px 課程表 font size 16px 星期 2 style font size 20px 星期天 2 st...