DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5詳解 >> 用HTML5 實現橡皮擦的塗抹效果的教程
用HTML5 實現橡皮擦的塗抹效果的教程
編輯：HTML5詳解     
這篇文章主要介紹了用Html5 實現橡皮擦的塗抹效果的教程,主要還是依賴於Canvas API來進行繪圖,需要的朋友可以參考下

最近項目剛好用到這種效果，也就是有點像刮刮卡一樣，在移動設備上，把某張圖片刮掉顯示出另一張圖片。效果圖如下：
2015511163305472.png (974×840)

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事件中對鼠標所在位置進行圓形區域擦除，寫出來後發現，當鼠標移動速度很快的時候，擦除的區域就不連貫了，就會出現下面這種效果，這顯然不是我們想要的橡皮擦擦除效果。
2015511163949198.jpg (1103×693)

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

計算方法也很簡單，因為可以知道兩個剪輯區域連線兩個端點的坐標，又知道我們要多寬的線條，矩形的四個端點坐標就變得容易求了，所以就有了下面的代碼：
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;   
  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就是兩個端點，從而求出了四個端點的坐標。這樣一來，剪輯區域就是圈加矩形，代碼組織起來就是：
XML/Html Code復制內容到剪貼板

  1. var hastouch = "ontouchstart" in window?true:false,//判斷是否為移動設備   
  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. 　　//鼠標第一次點下的時候擦除一個圓形區域，同時記錄第一個坐標點   
  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. 　　//鼠標移動時觸發該事件   
  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. 　　　　//獲取兩個點之間的剪輯區域四個端點   
  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. 　　　　//清除矩形剪輯區域裡的像素   
  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. 　　　　//記錄最後坐標   
  63.         x1 = x2;   
  64.         y1 = y2;   
  65.     }   
  66. })  

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

XML/Html Code復制內容到剪貼板
  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，對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.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)   

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

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

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


XML/Html Code復制內容到剪貼板
  1. //通過修改globalCompositeOperation來達到擦除的效果   
  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";　　//設置線條兩端為圓弧   
  16.         ctx.lineJoin = "round";　　//設置線條轉折為圓弧   
  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. }   

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

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

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

HTML5詳解
一個不錯的HTML5 Canvas多層點擊事件監聽實例
最近寫一個Html5的游戲框架。今天寫到一個多層點擊事件的監聽。覺得還是挺好玩的。於是把它從模塊中
HTML5教程:HTML5的基礎寫法
對比一下XHTML 1.0 Transitional的規范，Html5基本上沒有XHtml 1.0
Html5+JS實現手機搖一搖功能
這篇文章主要介紹了Html5+JS實現手機搖一搖功能,本文使用Html5的DeviceOrIEnt

相關文章

HTML入門知識HTML5教程關於HTMLHTML和XhtmlHTML5特效代碼HTML5詳解
小編推薦
跟KingDZ學HTML5之十：新的input類型2 html5更簡化了 html5 Geolocation 地理定位 針對webkit的HTML, CSS和Javascript 利用純html5繪制出來的一款非常漂亮的時鐘 深入解析HTML5的IndexedDB索引數據庫 一款html5 canvas實現的圖片玻璃碎片特效 用HTML5實現網站在windows8中貼靠的方法 純html5+css3下拉導航菜單實現代碼 html5 postMessage解決跨域、跨窗口消息傳遞
熱門推薦
HTML5 defer和async的區別 canvas應用 關於display: box 和 box-flex HTML5移動應用開發第4章：Web Workers來加速您的移動Web應用 html5使用canvas畫空心圓與實心圓 陀螺儀控件的使用 HTML5的結構和語義――目錄 HTML5技術教程：跨屏互動游戲 html5開發之viewport使用
大家都在看
nodejs命令行參數處理模塊commander使用實例 門戶網站構建CSS框架的規則 javascript 函數參數限制說明 用CSS設計網站導航：橫向導航 iframe裡面的元素觸發父窗口元素事件的jquery代碼 javascript驗證內容為數字以及長度為10的簡單實例 AJAX javascript的跨域訪問執行 用JavaScript判斷CSS浏覽器類型前綴的兩種方法
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved