js canvas實現擦除效果示例代碼

關于canvas的定義：

     HTML5 的 canvas 元素使用 JavaScript 在網頁上繪制圖像。

     畫布是一個矩形區域，您可以控制其每一像素。

     canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。

html代碼：

<div class="container">

 <canvas id="canvas" width="200" height="50"></canvas>

 <div class="content">hello world</div>

</div> 

設置一個父容器，里面包括canvas標簽，用于遮罩，content用于顯示擦除遮罩層之后的內容

ps：設置canvas元素需要加上width和height屬性，這樣繪制的圖形才能按照正常尺寸顯示，否則在css里面設置寬高，雖然canvas標簽的大小會正常顯示，繪制的圖形則會按照缺省寬高比例放大縮小，缺省的高度是300px，寬度是150px。

創建context對象，getContext("2d") 對象是內建的 HTML5 對象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法

var canvas = document.getElementById(id);

var ctx=canvas.getContext('2d'); 

繪制一個能覆蓋容器的矩形，rect() 方法創建矩形，fill()繪制圖像，默認顏色為黑色，可以使用fillStyle屬性設置其他顏色

ctx.rect(0,0,canvas.width,canvas.height);

ctx.fill(); 

圖像繪制完成，下面是事件綁定，要實現擦除效果，pc上主要綁定鼠標事件，鼠標按下，啟動擦除，鼠標松開，關閉擦除

canvas.addEventListener('mousedown', eventDown);

canvas.addEventListener('mouseup', eventUp);

canvas.addEventListener('mousemove', eventMove); 

這里先設置一個變量，用以表示，鼠標是否處于按下的狀態

var mousedown = false;

鼠標按下松開的事件比較簡單，主要是設置狀態參數

function eventDown(e){

 e.preventDefault();

 mousedown=true;

}

 

function eventUp(e){

 e.preventDefault();

 mousedown=false;

} 

鼠標滑動事件，鼠標滑過的地方，以圓形區域清除圖形

首先設置ctx.globalCompositeOperation = 'destination-out';

globalCompositeOperation 屬性設置或返回如何將一個源（新的）圖像繪制到目標（已有）的圖像上。

destination-out 在源圖像外顯示目標圖像。只有源圖像外的目標圖像部分會被顯示，源圖像是透明的。

這個屬性是在先后繪制圖形情況下，設置兩個圖形的顯示方式。

屬性值如下

具體顯示效果，紅色矩形是（新）目標圖像。藍色矩形是源（舊）圖像:

鼠標移動函數

function eventMove(e){

 e.preventDefault();

 if(mousedown) {

 var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0;

 var y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0;

 ctx.beginPath();

 ctx.arc(x, y, 20, 0, Math.PI * 20);

 ctx.fill();

 }

} 

arc() 方法創建弧/曲線（用于創建圓或部分圓），context.arc(x,y,r,sAngle,eAngle,counterclockwise);

ps：通過 arc() 來創建圓，請把起始角設置為 0，結束角設置為 2*Math.PI。

最終效果：

此方法只用于pc端，因為綁定的是鼠標事件，如果要在移動設備上也實現，需要綁定觸摸事件

canvas.addEventListener('touchstart', eventDown);

canvas.addEventListener('touchend', eventUp);

canvas.addEventListener('touchmove', eventMove); 

如果是觸摸事件，返回的對象中沒有直接的坐標相關信息，需要在changedTouches中去取到觸摸事件對應的 Touch 對象。

if(e.changedTouches){

　　e=e.changedTouches[e.changedTouches.length-1];

}

補充更新

這里只實現了使用背景色遮罩的方法，補充一下使用圖片作為遮罩的方法

var img = new Image();

img.src = 'cover.png';

創建一個圖片對象，并設置圖片地址，繪制圖片到canvas元素需要使用到drawImage方法，具體使用方法可以參考： HTML5 canvas drawImage() 方法

這里使用的時候需要注意，圖片加載是異步的，有時會加載的比較慢，在后續的繪制操作過程中，最好是在圖片加載完成后再進行

img.onload = function() {

 ctx.drawImage(img, 0, 0,canvas.width, canvas.height);

 ctx.globalCompositeOperation = 'destination-out'; 

　 //其他操作...

}

最終實現效果：

完整代碼下載：

github地址： https://github.com/Martian1/erase.js

本地下載：http://xiazai.jb51.net/201704/yuanma/erase.js-master(jb51.net).rar

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。