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. 【DP合集】m-knapsack

    给出 n 个物品,第 i 个物品有重量 w i .现在有 m 个背包,第 i 个背包的限重为 c i ,求最少用几个背 包能装下所有的物品. Input 输入的第一行两个整数 n, m ( n ≤ 2 ...

  2. SpringBoot系列教程web篇之过滤器Filter使用指南扩展篇

    前面一篇博文介绍了在 SpringBoot 中使用 Filter 的两种使用方式,这里介绍另外一种直接将 Filter 当做 Spring 的 Bean 来使用的方式,并且在这种使用方式下,Filte ...

  3. USART_FLAG_TXE和USART_FLAG_TC

    在串口数据发送操作中,代码一般是这样写的: void USART_SendByte(USART_TypeDef* USARTx, uint8_t Data) { while(USART_GetFlag ...

  4. npm install bcrypt报错

    gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env va ...

  5. 《全栈性能测试修炼宝典JMeter实战》学习记录

    说明:原书中jmeter版本为2.x,我的笔记中截图为5.x

  6. spring cloud alibaba 简介

    ### Spring Cloud Alibaba [官方github地址](https://github.com/alibaba/spring-cloud-alibaba) Spring Cloud ...

  7. 3. SOFAJRaft源码分析— 是如何进行选举的？

    开篇 在上一篇文章当中,我们讲解了NodeImpl在init方法里面会初始化话的动作,选举也是在这个方法里面进行的,这篇文章来从这个方法里详细讲一下选举的过程. 由于我这里介绍的是如何实现的,所以请大 ...

  8. Linux及Windows安装Redis（详细）

    Linux及Windows安装Redis 1.Windows安装教程 1.1下载 https://github.com/MSOpenTech/redis/releases 进入github里下载red ...

  9. 百万年薪python之路 -- HTML标签

    HTML标签 html标签分类 html标签又叫做html元素,它分为块级元素和内联元素(也可以叫做行内元素),都是html规范中的概念. 标题 h1 h2 h3 h4 h5 h6 列表 ol ul ...

  10. python3 requests_html 爬取智联招聘数据（简易版）

    PS重点:我回来了-----我回来了-----我回来了 1. 基础需要: python3 基础 html5 CS3 基础 2.库的选择: 原始库  urllib2  (这个库早些年的用过,后来淡忘了) ...