jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】

前端之家收集整理的这篇文章主要介绍了jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例讲述了jQuery使用eraser.js插件实现擦除、刮刮卡效果方法分享给大家供大家参考,具体如下:

jquery.eraser是一款使用鼠标或触摸的动作来擦除画布显示真正图片插件。jquery.eraser插件的原理是用一个画布遮住图片,然后根据触摸或鼠标输入来擦除画布显示图片,您可以在参数中指定一个回调函数设置画笔大小。

使用需知:

必须确保图片是完全加载之后调用eraser(),否则它不会工作。插件正常运行在Safari,Chrome OS X和Windows,Android和iOS Firefox,黑莓浏览器。

使用方法

引入核心文件

使用以下代码将图像变成一个可擦除画布。

添加选项指定画笔大小,(默认值为40):

可以设置参数来重置画布

可以通过设置clear参数来清除所有的画布

下面的代码实现当画布被擦除50%时触发事件showResetButton。

附:

jquery.eraser.js点击此处本站下载

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》及《

希望本文所述对大家jQuery程序设计有所帮助。

原文链接:https://www.f2er.com/jquery/39603.html

猜你在找的jQuery相关文章