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. bugku旋转跳跃

    下载下是一个mp3音频,尝试听了下,没有收获, 使用mp3stege,将文件拷在mp3stege目录下,然后使用cmd cd到目录下 命令行是decode -X -P 密码 文件 生成了一个文本 打开 ...

  2. UWP 使用新版画中画 FontIcon —— 如何使用自定义字体 —— 简单分析Windows Calculator源代码

    微软在新版UWP计算器中加入了一个“置顶”功能,它相当于我们之前看视频的“画中画”一样. 点击后窗体置顶,同时可以进行其他任务. 有的小伙伴说,不就是一个图标吗,去 Segoe MDL2 图标 把图标 ...

  3. 网络编程java

    网络编程 1.网络编程概述(1).C/S结构:指客户端与服务端结构,常见程序QQ;(2).B/S结构:指浏览器和服务器的结构;2.网络编程的三要素:*IP地址*端口号*通信协议(UDP/TCP) *I ...

  4. Attention机制全解

    前言 之前已经提到过好几次Attention的应用,但还未对Attention机制进行系统的介绍,之后的实践模型attention将会用到很多,因此这里对attention机制做一个总结. Seq2S ...

  5. Spring整合Mybatis（IDEA版）

    本文适用于初学者: 该文主要教大家如何整合spring和mybatis,整合完成效果,可以从数据库中查询出学生信息: 完整的工程目录如下: 整合思路: 需要spring来管理数据源信息. 需要spri ...

  6. composer依赖管理与laravel框架安装

    步骤有点多,生怕哪一天忘记,记录下来会好点 laravel安装有两种途径:1.直接在一些国内第三方网站,如:https://www.golaravel.com/download/ 下载压缩包来解压即可 ...

  7. sql注入100种姿势过waf(一)：waf 了解

    仅供学习交流如果你有更好的思路可以一起分享,想一起学习的进我主页 首先WAF(Web Application Firewall),俗称Web应用防火墙,主要的目的实际上是用来过滤不正常或者恶意请求包, ...

  8. docker1-centos上安装docker

    docker镜像(image)相当于面向对象的类 docker容器(container)相当于面向对象的对象 1.安装环境要求 目前,CentOS 仅发行版本中的内核支持 Docker. Docker ...

  9. ArcGIS Engine空间查询功能的实现（QueryFilterClass+SpatialFilterClass）

    地图中包含大量的信息,为了快速地了解所需信息,必须借助为空间数据专门编写的空间查询功能. 空间查询主要有两种类型: 基于属性的查询,也称为属性查询. 基于空间位置的查询,也称为空间查询. 查询类的基本 ...

  10. epoll(2) 使用及源码分析的引子

    epoll(2) 使用及源码分析的引子 本文代码取自内核版本 4.17 epoll(2) - I/O 事件通知设施. epoll 是内核在2.6版本后实现的,是对 select(2)/poll(2) ...