来源:
基于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>
。。。