jquery.eraser制作擦涂效果
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以后再触发代码 不然识别不到
可以用于刮刮卡
最新文章
- Demo 版
- 天河微信小程序入门《四》:融会贯通,form表单提交数据库
- C# 使用 StructLayoutAttribute 时 C# /C++ 内存空间分配与成员对齐问题
- 使用Lamda生成函数
- sort详解2
- noip模拟赛 纸壳子
- MyISAM 调度(优先级)的一些优化【转】
- struts2后台返回json到jsp页面
- LeetCode——Add Two Numbers
- android 使用NinePatch图作Background,导致布局混乱
- 解决IntelliJ IDEA 13更新FindBugs 0.9.993时JRE版本过低导致启动失败问题
- Mac terminal commands
- java学习笔记IO之字节输入输出流
- linux命令读取文件中特定行
- [Android] 免费天气预报接口
- python提取网页表格并保存为csv
- C语言链表:删除有序链表中大于mink小于maxk的元素
- Kafka实战-Kafka到Storm
- [CF438E] 小朋友和二叉树
- Use curl with uuid(uuidgen) under shell
热门文章
- 【TencentOS tiny】深度源码分析(8)——软件定时器
- 一个“Hello World”理解JVM运行时数据区
- 支撑微博亿级社交平台,小白也能玩转Redis集群(原理篇)
- Github 上热门的 Spring Boot 项目实战推荐
- 自力更生Collections.sort发现比较结果混乱?Comparator的锅还是强转类型导致?
- 详解 Redis 内存管理机制和实现
- 现在Java 桌面应用程序能做到什么程度(Spring Boot+JavaFX2开发)
- itextsharp生成pdf
- Node环境搭建--详细教程
- json基础用法