html5 canvas橡皮擦插件jQuery.eraser

jQuery.eraser.js 实现橡皮擦流程：将灰色的图片装载于一个 canvas 中，然后和彩色的图片用 CSS 定位在同一个位置，并设置 z-index 使 canvas 位于彩色图片之上。当按住鼠标并在画布(canvas) 上来回移动时，就有橡皮擦的效果了。我们也可以做类似刮刮乐的效果。

分类：其它特效 > jQuery插件难易：中级

查看演示下载资源下载积分： 20 积分

首先我们放置两种灰彩图片和进度#progress

<div class="sucaihuo">
    <img src="images/1.jpg" alt="">
    <img id="redux" src="images/2.jpg" alt="">
    <span id="progress">0%</span>
</div>

$(function(){
    $('#redux').eraser();
});

参数	描述	默认值
size	橡皮擦大小	40
completeRatio	擦出比率	0.7
completeFunction	配合 completeRatio 使用，达到擦出比率后的函数	null
progressFunction	擦出后的回调函数，他接收一个参数，为擦出后的比率（0.0 – 1.0）	null
reset	重置，即还原成未擦出的状态，如：$(‘#yourImage’).eraser(‘reset’);	-
clear	清除，如：$(‘#yourImage’).eraser(‘clear’);	-