基于Canvas的刮刮卡刮奖小控件lucky-card
来源:互联网 发布:caffe fcn边缘 编辑:程序博客网 时间:2024/06/05 16:52
lucky-card是一个实现刮刮卡刮奖效果的js小控件,基于HTML5 Canvas,采用原生js编写,不依赖任何类库,支持AMD/CMD模块化加载,支持iOS、Android和桌面浏览器(IE>=9),Windows Phone未测。
先来扫个DEMO看看(或者点击这里):
用法
HTML结构
<div id="scratch"> <div id="card">¥5000000元</div></div>
在页面中引入控件所需样式表文件lucky-card.css
<link rel="stylesheet" href="../dist/lucky-card.css">
以上css文件只有控件所必需的样式,刮刮卡样式请根据需要自行编写(可参考DEMO页面)
引入lucky-card.js/lucky-card.min.js文件
<script src='../dist/lucky-card.js'></script>
在确保页面相关DOM加载完毕(如写在页面底部,或document的DOMContentLoaded事件处理函数中)之后,初始化控件
LuckyCard.case();
可配置项与回调函数
初始化lucky-card控件时,支持传入一个JSON对象和(或)一个回调函数,用于配置控件功能/设置回调函数
LuckyCard.case(settings,callback);
- 参数settings是一个JSON对象,可选,用于配置控件功能
- 参数callback是回调函数,可选,也可以写在settings中
可配置项(settings)一览
//基本用法LuckyCard.case({coverColor:'#CCCCCC',ratio:.6,callback:function(){alert('中奖啦!')}});//刮开层支持使用图片,但图片不能跨域,如果跨域可以考虑将先其转成Data URI,再设置LuckyCard.case({coverImg:'./demo.jpg'});//callback可作为一个独立的参数存在LuckyCard.case(function(){ //清除掉刮开层的所有像素 this.clearCover();});
0 0
- 基于Canvas的刮刮卡刮奖小控件lucky-card
- 基于HTML5 Canvas的刮奖(刮刮卡)小控件(Scratch card based on HTML5 Canvas)
- iBET Poker Card Lucky Draw
- 基于队列的Card Stacking(poj)
- Poker Card Lucky Draw by iBET
- iBET Malaysia Poker Card Lucky Draw
- iBET Online Casino Lucky Draw Get Poker Card(iBET Lucky Draw, Lucky Draw Promotion)
- iBET Lucky Draw Poker Card Giveaway(casino malaysia, iBET Lucky Draw, iBET Online Casino, Lucky Draw
- Betmalay | iBET Lucky Draw Free Poker Card(Betmalay, Free Pocker Card, iBET Lucky Draw, Lucky Draw P
- 控件的Canvas的使用
- 基于Canvas的能力图
- 基于HTML5 Canvas的引擎
- 基于Canvas绘制的图表
- 基于canvas的图片保存
- 基于canvas的超级画板
- Host-based Card Emulation(基于主机的卡片仿真)
- 基于主机的卡仿真(Host-based Card Emulation)
- iBET Malaysia Poker Game Card Lucky Draw Giveaway
- SQL基本操作语句及经典语句全集-转
- Visual Studio 2008 可扩展性开发(八):关于用户界面的种种(上)
- 大规模网站架构技术原理透析(1)
- java语法基础
- C++中判断一个float类型数据是否为整数
- 基于Canvas的刮刮卡刮奖小控件lucky-card
- Visual Studio 2008 可扩展性开发(八):关于用户界面的种种(下)
- 内联函数 inline
- [转]在CentOS上安装Python
- 分布式常用组件和算法
- 使用 Xcode7 打包 HTML5+ 编写的应用 ipa 文件
- hadoop 源码中NameNode与DataNode主要的类目录
- 基于zepto.js的移动端H5单页面跟随手指滑动切换控件pageSlider
- centos下安装maven