来源：
基于HTML5 Canvas的刮奖（刮刮卡）小控件(Scratch card based on HTML5 Canvas)
JavaScript刮奖效果(jquery图片刮奖插件)（附件gj2）
非控件实现：
可配置项与回调函数
初始化lucky-card控件时，支持传入一个JSON对象和(或)一个回调函数，用于配置控件功能/设置回调函数
LuckyCard.case(settings,callback);
- 参数settings是一个JSON对象，可选，用于配置控件功能
- 参数callback是回调函数，可选，也可以写在settings中
可配置项（settings）一览
| coverColor | string | "#C5C5C5" | 刮开层的颜色，未设置coverImg时生效，支持十六进制和rgba写法 |
| coverImg | string | "" | 刮开层可以是一张图片，在这里设置图片地址，一旦设置此项，coverColor将失效。（注意：图片地址不支持跨域，如果跨域可以考虑将先其转成Data URI） |
| ratio | number | 0.8 | 触发回调函数时刮开面积占总面积的比例，超过这个比例回调就触发。建议取值在0到1之间。 |
| callback | function | null | 回调函数，在刮开面积占总面积的比例超过设定值时触发，亦可作为一个独立的参数存在。回调函数内可以调用this.clearCover()方法清除掉刮开层的所有像素。 |
//基本用法
LuckyCard.case({coverColor:'#CCCCCC',ratio:.6,callback:function(){alert('中奖啦！')}});
//刮开层支持使用图片，但图片不能跨域，如果跨域可以考虑将先其转成Data URI，再设置
LuckyCard.case({coverImg:'./demo.jpg'});
//callback可作为一个独立的参数存在
LuckyCard.case(function(){
//清除掉刮开层的所有像素
this.clearCover();
});
<!DOCTYPE html>
<!-- saved from url=(0046)http://franslee.github.io/lucky-card/demo.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>lucky-card.js</title>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width">
<style>
html,
body {
margin: 0;
padding: 0;
}
body {
background: #FFFFFF;
}
#card {
height: 100%;
font-weight: bold;
font-size: 36px;
line-height: 100px;
text-align: center;
background: #FAFAFA;
}
#scratch {
width: 300px;
height: 100px;
margin: 50px auto 0;
border: 1px solid #ccc;
}
</style>
<link rel="stylesheet" href="./css/lucky-card.css">
<script src="./js/lucky-card.min.js"></script>
</head>
<body>
<div id="scratch">
<div id="card" style="background:yellow">￥5000000元</div>
</div>
<script>
LuckyCard.case({
coverColor:'red',
ratio: .5
}, function() {
alert('至于你信不信，我反正不信！');
this.clearCover();
});
</script>
</body></html>
。。。
相关推荐
本教程将详细讲解如何使用Taro来实现刮刮卡功能。 一、Taro基础 首先，你需要了解Taro的基本概念和用法。Taro 使用React的语法，通过编译转换，使得代码可以运行在不同的平台。你需要熟悉React组件化开发，掌握JSX...
刮刮卡插件的核心功能是通过JavaScript实现动态的刮开效果。它通常包括以下几个关键部分： 1. **HTML结构**：`刮奖.html`文件包含刮刮卡的基本布局。HTML元素通常是一个容器，内部包含可刮擦的区域以及可能的隐藏...
3. 前端HTML/CSS/JS代码：实现转盘和刮刮卡的交互界面，通过AJAX与后端PHP接口进行通信。 4. 可能还包含配置文件：如数据库连接信息、API密钥等。 总结来说，PHP移动端开发中的“幸运大转盘刮刮卡”活动，不仅涉及...
在本示例中，"刮刮卡.rar" 是一个压缩包，其中包含了一个实现刮刮卡功能的小程序。下面将详细探讨这个小程序所涉及的技术和知识点。 1. **HTML5 Canvas**： 刮刮卡的核心是使用了HTML5的Canvas元素，这是一个可...
在提供的文件名"Rubbler"中，推测可能包含了作者实现刮刮卡效果的源码文件，例如一个JavaScript文件或者一个CSS文件，读者可以下载并研究其中的实现细节，以便于自己项目中复用或进行二次开发。 总结来说，创建...
首先，刮刮卡的实现通常基于Web技术，尤其是JavaScript，这可以从文件夹`javascripts`的命名中推断出来。JavaScript是网页动态交互的核心，负责处理用户的刮卡动作、结果显示、随机奖项生成等功能。在源码中，我们...
6. **刮刮卡效果**：前端实现刮刮卡效果，一般通过CSS和JavaScript完成。CSS可以设定刮刮区的样式，JavaScript则负责刮开覆盖层的交互逻辑。 7. **奖品分配策略**：抽奖系统需要设定合理的奖品分配策略，如概率分配...
JavaScript用于实现刮刮卡的交互效果，例如模拟刮擦动作，显示或隐藏中奖结果。 3. **安全性**：考虑到抽奖系统的公正性和安全性，PHP源码可能包含了防止SQL注入、XSS攻击的防护措施，确保数据安全。 4. **随机性*...
在这个场景中，我们关注的是HTML5在微信开发中的应用，特别是用于创建刮刮卡（Scratch Card）和刮刮乐...通过深入研究和修改这些代码，你可以根据自己的需求定制刮刮卡游戏，提升微信小程序或H5页面的趣味性和互动性。
在这个“刮刮乐”程序中，它被用来模拟传统的刮刮卡效果，用户可以通过鼠标操作在网页上刮开覆盖层，揭露隐藏的信息。以下是对这个程序的详细解释： 首先，`canvas`元素是HTML5中的一个核心元素，它提供了一个二维...
JavaScript刮刮卡特效是一种在网页上实现互动抽奖或者宣传活动的常见技术。这种特效代码通常由JavaScript、HTML和CSS三部分组成，为用户提供一种模拟现实刮刮卡的用户体验。以下是对这个"js刮刮卡特效特效代码"的...
【刮刮卡与小程序开发】 刮刮卡是一种常见的互动营销工具，常用于各种抽奖、促销活动中，用户通过刮开覆盖层来揭晓奖项。在数字化时代，这种传统的游戏形式被广泛应用于移动应用，尤其是微信小程序中。微信小程序因...
HTML5 Canvas 刮刮卡程序的实现涉及到JavaScript编程、Canvas绘图API的熟练运用，以及对用户体验的考虑。这种技术广泛应用于在线游戏、互动广告和教学应用中，为用户提供了一种新颖且有趣的交互方式。通过不断实践和...
在JavaScript开发的背景下，Flutter刮刮卡小部件的实现是完全基于Dart语言的，与JavaScript语法有显著差异。不过，由于Flutter的跨平台特性，JavaScript开发者也能相对较快地适应Dart环境。 在“scratcher-master”...
8. **脚本（JavaScript）**：如`script.js`，实现刮刮卡的交互效果和抽奖逻辑。 9. **图片和其他资源**：如图标、背景图片等，用于美化界面。 这个刮刮卡抽奖系统可能涉及到的技术和知识点包括： - PHP基础语法和...
3. 动画效果：通过CSS3动画或JavaScript实现刮开动作的过渡效果。 4. 随机奖项：与幸运大转盘类似，刮刮卡也需要设定随机的中奖规则。 5. 用户交互设计：考虑用户体验，如刮卡力度、速度反馈，以及中奖提示等。 三...
这种源码资源通常包含了一系列的前端代码、样式表、图像资源以及可能的后端接口，用于实现刮刮卡功能。下面将详细阐述移动端刮刮卡抽奖的相关知识点： 1. **用户体验设计**： - 移动优先：移动端刮刮卡设计必须...
在网页中，这通常通过CSS样式实现覆盖层，并用JavaScript控制刮开动作。当用户刮开指定区域时，显示隐藏的中奖信息。 3. **乐享**："乐享"可能是一个特定的品牌或者平台，这里指的可能是某个已有的大转盘和刮刮卡...