请用手机扫描以下二维码，桌面浏览器可以点击这里
可配置项与回调函数
初始化lucky-card控件时，支持传入一个JSON对象和(或)一个回调函数，用于配置控件功能/设置回调函数
LuckyCard.case(settings,callback);
- 参数settings是一个JSON对象，可选，用于配置控件功能
- 参数callback是回调函数，可选，也可以写在settings中
可配置项（settings）一览
| key | 类型 | 默认值 | 描述 |
|---|---|---|---|
| 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>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>lucky-card.js - DEMO - http://github.com/Franslee/lucky-card</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: 200px;
text-align: center;
background: #FAFAFA;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
#scratch {
position: relative;
width: 300px;
height: 200px;
margin: 100px auto 0;
border: 1px solid #ccc;
}
#cover{
position: absolute;
top:0;
left:0;
}
</style>
<script type="text/javascript">
!
function(a, b, c) {
"use strict";
function d(a, b) {
this.cover = null,
this.ctx = null,
this.scratchDiv = null,
this.cardDiv = null,
this.cHeight = 0,
this.cWidth = 0,
this.supportTouch = !1,
this.events = [],
this.startEventHandler = null,
this.moveEventHandler = null,
this.endEventHandler = null,
this.x = null,
this.y = null,
this.opt = {
coverColor: "#C5C5C5",
coverImg: "",
ratio: .8,
callback: null
},
this.init(a, b)
}
function e(a, b, c) {
var d = a.getImageData(0, 0, 300, 100),
e = [];
f(d.data,
function(a, b) {
var c = d.data[b + 3];
0 === c && e.push(c)
}),
e.length / d.data.length > c && b && "function" == typeof b && b()
}
function f(a, b) {
return Array.prototype.forEach.call(a,
function(a, c) {
b(a, c)
})
}
function g() {
var a = b.createElement("canvas");
return ! (!a.getContext || !a.getContext("2d"))
}
function h(a) {
this.moveEventHandler = i.bind(this),
this.cover.addEventListener(this.events[1], this.moveEventHandler, !1),
this.endEventHandler = j.bind(this),
b.addEventListener(this.events[2], this.endEventHandler, !1),
a.preventDefault();
if(a.type == 'touchstart'){
var _b = this.supportTouch ? a.touches[0] : a;
var _c = this.cover.getBoundingClientRect();
this.x = _b.pageX - _c.left;
this.y = _b.pageY - _c.top;
}
}
function i(a) {
var b = this.supportTouch ? a.touches[0] : a,
c = this.cover.getBoundingClientRect(),
d = b.pageX - c.left,
e = b.pageY - c.top;
this.ctx.beginPath(),
this.ctx.fillStyle = "#FFFFFF",
this.ctx.lineJoin = "round",
this.ctx.lineCap = "round",
this.ctx.lineWidth = 40,
this.ctx.moveTo(this.x, this.y),
this.ctx.lineTo(d, e),
this.ctx.globalCompositeOperation = "destination-out",
this.ctx.stroke(),
a.preventDefault();
this.x = d;
this.y = e;
}
function j(a) {
this.opt.callback && "function" == typeof this.opt.callback && e(this.ctx, this.opt.callback, this.opt.ratio),
this.cover.removeEventListener(this.events[1], this.moveEventHandler, !1),
b.removeEventListener(this.events[2], this.endEventHandler, !1),
a.preventDefault()
}
d.prototype.createCanvas = function() {
if (this.cover = b.createElement("canvas"), this.cover.id = "cover", this.cover.height = this.cHeight, this.cover.width = this.cWidth, this.ctx = this.cover.getContext("2d"), this.opt.coverImg) {
var a = this,
c = new Image;
c.src = this.opt.coverImg,
c.onload = function() {
a.ctx.drawImage(c, 0, 0, a.cover.width, a.cover.height)
}
} else this.ctx.fillStyle = this.opt.coverColor,
this.ctx.fillRect(0, 0, this.cover.width, this.cover.height);
this.scratchDiv.appendChild(this.cover)
},
d.prototype.eventDetect = function() {
"ontouchstart" in a && (this.supportTouch = !0),
this.events = this.supportTouch ? ["touchstart", "touchmove", "touchend"] : ["mousedown", "mousemove", "mouseup"],
this.addEvent()
},
d.prototype.addEvent = function() {
this.startEventHandler = h.bind(this),
this.cover.addEventListener(this.events[0], this.startEventHandler, !1)
},
d.prototype.clearCover = function() {
this.ctx.clearRect(0, 0, this.cover.width, this.cover.height)
},
d.prototype.init = function(a, c) {
if (!g()) return void alert("对不起，当前浏览器不支持Canvas，无法使用本控件！");
var d = this;
f(arguments,
function(a) {
if ("object" == typeof a) for (var b in a)"callback" === b && "function" == typeof a[b] ? d.opt.callback = a[b].bind(d) : d.opt[b] && (d.opt[b] = a[b]);
else "function" == typeof a && (d.opt.callback = a.bind(d))
}),
this.scratchDiv = b.getElementById("scratch"),
this.cardDiv = b.getElementById("card"),
this.scratchDiv && this.cardDiv && (this.cHeight = this.cardDiv.clientHeight, this.cWidth = this.cardDiv.clientWidth, this.createCanvas(), this.eventDetect())
},
d["case"] = function(a, b) {
return new d(a, b)
},
"function" == typeof define && "object" == typeof define.amd && define.amd ? define(function() {
return d
}) : "undefined" != typeof module && module.exports ? (module.exports = d["case"], module.exports.scratchCard = d) : a.scratchCard = d
} (window, document);
</script>
</head>
<body>
<div id="scratch">
<div id="card">￥5000000元</div>
</div>
<script>
scratchCard.case({
ratio: .6
}, function() {
alert('至于你信不信，我反正不信！');
this.clearCover();
});
</script>
</body>
</html>
原地址：https://github.com/Franslee/lucky-card
124
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
