使用canvas實現擦除效果

w3c關於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];
}

　

2017.4.23更新

這裏只實現了使用背景色遮罩的方法，補充一下使用圖片做爲遮罩的方法

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';  
　  //其餘操做...
}

最終實現效果：

 

 

　

完整代碼： https://github.com/Martian1/erase.js