要使用JS实现刮刮卡页面，比较简单就是私用使用wScratchPad。
使用wScratchPad需要2个js文件：jquery.js & wScratchPad.js. 而且浏览器需要支持Canvas。
<!DOCTYPE html>
<html>
<head>
<meta CHARSET="UTF-8">
<title>刮刮乐</title>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/wScratchPad.js"></script>
</head>
<body>
<style>
#wScratchPad3{
width: 25%;
height: 100px;
border: solid 1px;
display: inline-block;
}
</style>
<div id="wScratchPad3"></div>
<script type="text/javascript">
$("#wScratchPad3").wScratchPad({
cursor:'img/slide1.jpg',
scratchMove: function(e, percent)
{
if(percent > 60)
this.clear();
},
});
</script>
</body>
</html>
相关推荐
javascript特效实现刮刮卡特效代码下载
NULL 博文链接：https://uule.iteye.com/blog/2348916
利用js+canvas实现刮刮卡注：本例只实现了刮落效果，具体中奖设计请自行实现！
JS刮刮卡，网页刮刮卡游戏源代码 可以自定义遮盖层颜色和刮刀的图片样式，是一个比较好玩的网页小应用。
js刮刮卡特效代码是一款适合商家网站抽奖宣传的刮刮卡网页特效代码下载。
非常不错的HTML5+JS实现刮刮乐刮刮卡抽奖特效代码，基于jQuery实现，支持响应式手机页面使用， 支持手机涂抹，如今在微营销中经常使用这种方式，用户体验非常的不错。
使用canvas利用覆盖合成实现刮刮卡效果
最近要做刮刮卡小游戏，在网上搜索了一吧，自己改进了一下别人的代码，刮刮效果还可以自己调节。
主要介绍了jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法,结合实例形式分析了jQuery.eraser.js插件的功能、使用方法与相关注意事项,并附带eraser.js插件源码供读者下载使用,需要的朋友可以参考下
用Canvas实现类似刮刮卡的图片特效，还包括一些Canvas基本知识的代码，比如画圆、矩形等等
刮刮卡js代码
实现刮刮卡效果的js，非常好用。已经用了很多次。可以有不同的奖品，不同的获奖响应。
主要介绍了javascript+canvas实现刮刮卡抽奖效果的相关资料,需要的朋友可以参考下
刮刮卡vue组件，可在PC或移动端使用
今天我给大家分享一个基于HTML5技术实现的刮刮卡效果，在PC上只需按住鼠标，在手机上你只需按住指头，轻轻刮去图层就可以模拟真实的刮奖效果。 源码下载：点击下载 我们利用HTML5的画布Canvas，结合其提供的API，在...
js基于canvas实现时钟组件 canvas一直是前端开发中不可或缺的一种用来绘制图形的标签元素，比如压缩上传的图片、比如刮刮卡、比如制作海报、图表插件等，很多人在面试的过程中也会被问到有没有接触过canvas图形...
手机完美支持html5,所以如果手机端想要做个抽奖模块的话,用刮刮卡抽奖效果,相信这个互动体验是非常棒的，本人亲自完成，有错误请大家指出