本文實例講述了jQuery使用eraser.js插件實現(xiàn)擦除、刮刮卡效果的方法。分享給大家供大家參考，具體如下：

jquery.eraser是一款使用鼠標(biāo)或觸摸的動作來擦除畫布顯示真正圖片的插件。jquery.eraser插件的原理是用一個畫布遮住圖片，然后根據(jù)觸摸或鼠標(biāo)輸入來擦除畫布顯示圖片，您可以在參數(shù)中指定一個回調(diào)函數(shù)設(shè)置畫筆大小。

使用需知：

必須確保圖片是完全加載之后調(diào)用eraser(),否則它不會工作。插件正常運行在Safari，Chrome OS X和Windows，Android和iOS Firefox，黑莓瀏覽器。

使用方法：

引入核心文件

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script src='jquery.eraser.js' type='text/javascript'></script>

使用以下代碼將圖像變成一個可擦除畫布。

$('#yourImage').eraser();

添加選項指定畫筆大小,(默認值為40):

$('#yourImage').eraser( { size: 30 } );// 也可以以下面的方式來實現(xiàn)// $('#yourImage').eraser( "size", 30 }

可以設(shè)置參數(shù)來重置畫布

$('#yourImage').eraser('reset');

可以通過設(shè)置clear參數(shù)來清除所有的畫布

$('#yourImage').eraser('clear');

下面的代碼實現(xiàn)當(dāng)畫布被擦除50%時觸發(fā)事件showResetButton。

$('#yourImage').eraser( {  completeRatio: .5,  completeFunction: showResetButton});

附：jquery.eraser.js點擊此處本站下載。

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery常用插件及用法總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery擴展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計有所幫助。