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';
//其他操作...
}
最終實現效果：
