插件描述：ScratchCard支持移动端的canvas刮刮卡插件
简要教程
ScratchCard是一款支持移动手机的HTML5 canvas刮刮卡插件。该刮刮卡插件支持移动触摸事件，提供刮卡的回调函数，简单易用，效果非常不错。
使用方法
在页面中引入Scratch.js文件。
<script type="text/javascript" src="js/Scratch.js"></script>
HTML结构
使用下面的HTML结构来制作一个刮刮卡：
<div class="scratch_container"> <div class="scratch_viewport"> <!-- result picture --> <canvas id="js-scratch-canvas"></canvas> </div> </div>
CSS样式
为刮刮卡添加下面的CSS样式。
.scratch_container {
position: relative;
margin: 0 auto;
max-width: 1024px;
}
.scratch_viewport {
position: relative;
width: 250px;
height: 250px;
margin: 0 auto;
z-index: 0;
}
.scratch_picture-under {
position: absolute;
top: 0;
left: 0;
display: block;
z-index: -1;
}
.scratch_container canvas {
position: relative;
width: 100%;
height: auto;
z-index: 1;
}初始化插件
在页面页面底部<body>标记结束之前，使用下面的代码来实例化一个刮刮卡对象。
var scratch = new Scratch({
canvasId: 'js-scratch-canvas',
imageBackground: 'loose.jpg',
pictureOver: 'foreground.jpg',
cursor: {
png: 'piece.png',
cur: 'piece.cur',
x: '20',
y: '17'
},
radius: 20,
nPoints: 100,
percent: 50,
callback: function () {
alert('I am Callback.');
},
pointSize: { x: 3, y: 3}
});配置参数
该Canvas刮刮卡插件的可用配置参数有：
canvasId：canvas的id。
imageBackground：背景图片（刮开后呈现的图片）。
pictureOver：前景图片。
sceneWidth：canvas的宽度。
sceneHeight：canvas的高度。
radius：清除区域的半径。
nPoints：清除区域的杂点数量。
percent：在清除多少区域之后清空canvas。
cursor：光标。
png：png格式的光标。
x：Move position x。
y：Move position y。
cur：cur格式的光标（IE使用）。
PREVIOUS:
NEXT:
相关插件-游戏
html5 canvas简易版捕鱼达人游戏源码
html5利用canvas写的一个js版本的捕鱼，有积分统计，鱼可以全方位移动，炮会跟着鼠标移动，第一次打开需要鼠标移出背景图，再移入的时候就可以控制炮的转动，因为是用的mouseover触发的。
游戏
讨论这个项目（15）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约
Devil灬旋律 0
2018/3/7 17:15:30
-
现在在移动端苹果手机上遇到一个问题，在苹果手机上的效果不好，在图片刮的过程中，屏幕还是会随着移动，导致感觉晃来晃去。阻止默认事件、阻止冒泡都试过，不好用，不知道是什么原因。
回复
as935555 0
2017/8/1 19:59:28
浏览器只执行一次回调函数没有错，但是浏览器模拟移动端的时候只要鼠标一直按着就一直执行回调函数
as9355550
2017/8/1 20:01:55
怎么解决啊
Devil灬旋律0
2018/3/7 17:17:29
-
在插件js里边，监听touchmove事件的那里改一下。
张莎 0
2017/2/23 11:12:42
不能用啊，没有回调函数
一夕流年╁0
2018/2/11 17:09:27
-
放在服务器环境才行 或者用webstm打开
Asher0
2020/5/22 9:33:41
-
为什么需要在环境下才能打开啊
西瓜0
2020/5/22 13:52:49
-
getImageData此方法不允许操作非此域名外的图片资源，即使是子域也不行。如果本地想预览可以把图片转换成base64
😃
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
😃
取消回复
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
