jquery.eraser制作擦涂效果

<pre>
<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta charset="utf-8" />
<title>
canvas画图
</title>
</head>

<body>
<img id="redux" style="width:60%;" src="http://www.w3school.com.cn/i/ct_html5_canvas_image.gif" />
<script type="text/javascript" src="/moban/js/jquery.min.js"></script>
<script type="text/javascript" src="/moban/js/jquery.eraser.js"></script>
<script type="text/javascript">
$(function() {
$('#redux').eraser({
completeRatio: .6,
size: 20,
completeFunction: showResetButton
});
})
function showResetButton(){
alert('刮完');
}
</script>
</body>

</html>
</pre>

ps:jquery.eraser.js源码我修改了 ctx.drawImage( this, 0, 0,width,height ); 这样就能自适应了 所以图片必须设置宽度

ps:这个刮刮卡fadeIn以后再触发代码 不然识别不到

可以用于刮刮卡

jquery.eraser制作擦涂效果的更多相关文章

  1. 学习使用 jQuery & CSS3 制作照片堆栈效果

    在这个小实验中,我们使用 jQuery & CSS3 创建了一个交互式的照片堆栈效果.提供了一些模拟现实的互动的可能性给用户.这个想法的思路是:有一些照片在桌面上可以拖放一样,堆放和删除,每个 ...

  2. 酷！使用 jQuery & Canvas 制作相机快门效果

    在今天的教程中,我们将使用 HTML5 的 Canvas 元素来创建一个简单的摄影作品集,它显示了一组精选照片与相机快门的效果.此功能会以一个简单的 jQuery 插件形式使用,你可以很容易地整合到任 ...

  3. 使用 jQuery & CSS3 制作美丽的照片画廊

    在本教程中,我们将创建一个很好看的照片画廊效果.我们的想法是,以显示专辑作为一个滑块,而当这张专辑被选中,我们将使用一个美丽的照片堆栈展示专辑的图像.在照片堆栈视图,我们可以通过将最上面的图像移动到所 ...

  4. jQuery & CSS 制作金属质感的选择按钮

    如果能把 CSS 运用好,我们创作出好的交互和效果的可能性大大增加.这篇文章中,我想与大家分享一组结合 jQuery & CSS 制作的充满金属质感的选择框效果,绝对是超级精美的效果. 在线演 ...

  5. jQuery手风琴制作

    jQuery手风琴制作 说起手风琴,想必大家应该都知道吧,简单的来说就是可以来回收缩的这么一个东西,接下来,我就给大家演示一下用jQuery制作一个手风琴菜单! 写jQuery前,我们需要引用一个jQ ...

  6. 分享21个基于jquery菜单导航的效果

    jquery导航菜单插件制作jquery动画菜单熔岩灯菜单效果更新时间:02月15日 14:53:03 虾米精选-菜单导航-导航菜单 0浏览 / ★★★☆☆星级 / 未知软件大小/ jquery导航菜 ...

  7. 使用 Sticky-Kit 实现基于 jQuery 的元素固定效果

    元素固定效果在网页中应用得很多,比较常见的使用场景有改进导航,显示广告.Sticky-Kit 是一个非常方便的 jQuery 插件,简化了创建/管理粘元素,有复杂的使用功能.这些功能包括:处理多个固定 ...

  8. jQuery模仿人类打字效果插件typetype

    typetype是一款模仿人类打字效果的jQuery插件,typetype非常轻巧,文件不到2K,gzipped压缩后只有578字节,但模仿的效果非常逼真,一字一字的顿出和回删效果,让人惊叹不止,喜欢 ...

  9. jquery实现章节目录效果

    <html><head><title>jquery实现章节目录效果</title> <script type="text/javascr ...

随机推荐

  1. 【TencentOS tiny】深度源码分析（8）——软件定时器

    软件定时器的基本概念 TencentOS tiny 的软件定时器是由操作系统提供的一类系统接口,它构建在硬件定时器基础之上,使系统能够提供不受硬件定时器资源限制的定时器服务,本质上软件定时器的使用相当 ...

  2. 洛谷NOIp热身赛 T2123 数列游戏

    题目背景 此题为改编题,特别鸣谢倪星宇同学. 有一次,HKE和LJC在玩一个游戏. 题目描述 游戏的规则是这样的:LJC在纸上写下两个长度均为N的数列A和B,两个数列一一对应.HKE每次可以找两个相邻 ...

  3. Maya零基础新手入门教程第一部分：界面

    第1步:菜单 如果您曾经使用过一个软件,那么您将习惯菜单!在Maya中,菜单包含用于在场景中工作的工具和操作.与大多数程序一样,主菜单位于Maya窗口的顶部,然后还有面板和选项窗口的单独菜单.您还可以 ...

  4. postman动态数据获取

    1.以获取token(JWT)和uid为例 2.在登录接口的tests中写入代码(因为登录接口报文信息中有返回JWT和uid) 3.在其他接口中需要用到JWT和uid的地方设置变量{{JWT}}和{{ ...

  5. js判断是否为空和typeof的用法

    (1)typeof作用用于查看数据类型 (2)typeof用法typeof 返回值类型有number, string, boolean, function, undefined, objectPS:在 ...

  6. 如何正确的在 Android 上使用协程 ？

    前言 你还记得是哪一年的 Google IO 正式宣布 Kotlin 成为 Android 一级开发语言吗?是 Google IO 2017 .如今两年时间过去了,站在一名 Android 开发者的角 ...

  7. AWD攻防工具脚本汇总(一)

    最近工作很忙 今天抽空准备下AWD比赛得攻防工具和脚本 以下只是常用 希望下周不被吊锤~~ 后续整理后想抽空写成一个攻击框架汇总放github~~ 这里从各种情景和需求中去总结工具和脚本的使用   情 ...

  8. HTML DIV充满整个屏幕

    <!DOCTYPE html> <html> <head> <title>A Little Game!</title> <meta c ...

  9. [NOIp2011] luogu P1314 聪明的质监员

    题目描述 点进去看吧,说的不能再清楚了. Solution 看到数据规模不难想到二分 WWW,然后用个前缀和优化一下即可.注意上下界. #include<cstdio> #include& ...

  10. [POJ2262] Goldbach’s Conjecture

    Goldbach's Conjecture Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 48161   Accepted: ...