快捷導(dǎo)航

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

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

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

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

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

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

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

html代碼：

<div class="container">

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

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

</div>

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

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

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

var canvas = document.getElementById(id);

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

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

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

ctx.fill();

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

canvas.addEventListener('mousedown', eventDown);

canvas.addEventListener('mouseup', eventUp);

canvas.addEventListener('mousemove', eventMove);

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

var mousedown = false;

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

function eventDown(e){

 e.preventDefault();

 mousedown=true;

}

 

function eventUp(e){

 e.preventDefault();

 mousedown=false;

}

鼠標(biāo)滑動(dòng)事件，鼠標(biāo)滑過的地方，以圓形區(qū)域清除圖形

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

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

destination-out 在源圖像外顯示目標(biāo)圖像。只有源圖像外的目標(biāo)圖像部分會(huì)被顯示，源圖像是透明的。

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

屬性值如下

具體顯示效果，紅色矩形是（新）目標(biāo)圖像。藍(lán)色矩形是源（舊）圖像:

鼠標(biāo)移動(dòng)函數(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)建圓，請(qǐng)把起始角設(shè)置為 0，結(jié)束角設(shè)置為 2*Math.PI。

最終效果：

此方法只用于pc端，因?yàn)榻壎ǖ氖鞘髽?biāo)事件，如果要在移動(dòng)設(shè)備上也實(shí)現(xiàn)，需要綁定觸摸事件

canvas.addEventListener('touchstart', eventDown);

canvas.addEventListener('touchend', eventUp);

canvas.addEventListener('touchmove', eventMove);

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

if(e.changedTouches){

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

}

補(bǔ)充更新

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

var img = new Image();

img.src = 'cover.png';

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

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

img.onload = function() {

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

 ctx.globalCompositeOperation = 'destination-out'; 

　 //其他操作...

}

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