快捷導(dǎo)航

js canvas實現(xiàn)擦除效果示例代碼

更新時間：2017年04月26日 09:37:48 作者：趙青

擦除效果在我們?nèi)粘ｉ_發(fā)中也是時有見到的，通過擦除效果大大加強了與用戶的交互性，所以下面這篇文章主要給大家介紹了利用js和canvas實現(xiàn)擦除效果的相關(guān)資料，文中給出了詳細的介紹和示例代碼，需要的朋友可以參考借鑒，下面來一起看看吧。

關(guān)于canvas的定義：

HTML5 的 canvas 元素使用 JavaScript 在網(wǎng)頁上繪制圖像。

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

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

html代碼：

<div class="container">

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

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

</div>

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

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

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

var canvas = document.getElementById(id);

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

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

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

ctx.fill();

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

canvas.addEventListener('mousedown', eventDown);

canvas.addEventListener('mouseup', eventUp);

canvas.addEventListener('mousemove', eventMove);

這里先設(shè)置一個變量，用以表示，鼠標是否處于按下的狀態(tài)

var mousedown = false;

鼠標按下松開的事件比較簡單，主要是設(shè)置狀態(tài)參數(shù)

function eventDown(e){

 e.preventDefault();

 mousedown=true;

}

 

function eventUp(e){

 e.preventDefault();

 mousedown=false;

}

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

首先設(shè)置ctx.globalCompositeOperation = 'destination-out';

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

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

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

屬性值如下

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

鼠標移動函數(shù)

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() 方法創(chuàng)建弧/曲線（用于創(chuàng)建圓或部分圓），context.arc(x,y,r,sAngle,eAngle,counterclockwise);

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

最終效果：

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

canvas.addEventListener('touchstart', eventDown);

canvas.addEventListener('touchend', eventUp);

canvas.addEventListener('touchmove', eventMove);

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

if(e.changedTouches){

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

}

補充更新

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

var img = new Image();

img.src = 'cover.png';

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

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

img.onload = function() {

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

 ctx.globalCompositeOperation = 'destination-out'; 

　 //其他操作...

}

最終實現(xiàn)效果：