jQuery.eraser.js是一款基于jQuery的插件，它可以讓用戶通過鼠標擦除圖像中的某些部分，從而達到特殊的視覺效果。這個插件的源碼非常簡單清晰，下面我們就來逐步分析它。

插件的核心代碼如下：

(function($) {
$.fn.eraser = function(options) {
var settings = $.extend({
size : 50,
completeRatio : .7,
completeFunction : function() {}
}, options);
var draw = false;
var image = this;
var scratch = null;
var container = null;
var canvas = null;
var context = null;
var sizeHalf = settings.size/2;
var complete = false;
var touchDown = 'mousedown.eraser touchstart.eraser';
var touchMove = 'mousemove.eraser touchmove.eraser';
var touchUp   = 'mouseup.eraser touchend.eraser';
this.on('load',function(){
container = $('
',{
style: 'position:relative;width:'+$(image).width()+'px;height:'+$(image).height()+'px;display:inline-block;'
});
$(image).wrap(container);
scratch = $(image).clone().css('position','relative').css('opacity',1).attr('class','').removeClass('eraser').removeAttr('id');
canvas = $('',{style:'width:'+$(image).width()+'px;height:'+$(image).height()+'px;'});
context = canvas.get(0).getContext("2d");
$(image)
.before(canvas)
.before(scratch)
.css('position','absolute').css('top',0).css('left',0).css('opacity',0);
scratch.on(touchDown,function(e){
draw = true;
})
.on(touchUp,function(e){
draw = false;
percentComplete(e);
})
.on(touchMove,function(e){
if(draw){
var x = (e.changedTouches ? e.changedTouches[0] : e).clientX - canvas.offset().left - sizeHalf;
var y = (e.changedTouches ? e.changedTouches[0] : e).clientY - canvas.offset().top - sizeHalf;
with(context){
beginPath();
globalCompositeOperation = 'destination-out';
arc(x, y, settings.size, 0, Math.PI * 2, false);
fill();
closePath();
}
}
});
function percentComplete(e){
var hits = 0;
var imageData = context.getImageData(0,0,canvas.width(),canvas.height());
for(var i = 0;i< imageData.data.length;i+=4) {
if(imageData.data[i + 3] !== 0) {
hits++;
}
}
if(hits/(canvas.width()*canvas.height())>settings.completeRatio){
if(!complete){
complete=true;
settings.completeFunction.call(image,e);
}
}
}
});
};
})(jQuery);

首先，將這個函數整體包在了一個匿名函數里，以避免變量名的沖突。其中，$.fn.eraser表示在jQuery的原型上添加一個eraser方法，options表示用戶傳入的定制化參數。

接著，通過$.extend方法將用戶傳入的參數與默認的參數合并到settings變量中，這樣設置了默認的參數以后如果用戶沒有傳入相應的參數就可以使用默認值。

接著，根據鼠標事件重新繪制了全局變量scratch、canvas和context，并將canvas和scratch插入到了原始圖像之前，并將原始圖像的opacity設為0，從而實現了疊加的效果。

最后，在scratch上添加綁定事件，實現圖像將鼠標懸浮處的區域刪除的功能，并通過調用percentComplete函數計算刪除的比例，當刪除比例達到70%時，調用用戶傳入的回調函數完成操作。其中使用了getImageData函數獲取canvas中的像素點數據，并通過循環判斷其中非透明像素點的數量占比達到一定比例時觸發事件。