iTakeo

canvas刮刮卡抽奖。

造轮子系列–刮刮卡效果

调用方法：

scratcher(‘.canvas_con1’).init({
text : ‘刮刮卡’, //填充文字
textColor : ‘#fff’, //文字颜色
fontSize : 25, //文字大小
touchSize : 10, //擦除路径大小
data : null, //图片数组
bgColor : ‘gray’, //背景颜色
start : function(){}, //按下执行
end : function(){} //擦除结束执行
})

//另外还有两个方法，一个是清空画布，用于结束后使用
this.clear();
//一个是重置函数，用于结束后再来一次
this.reset();
//以上两个行数都在回调函数内执行。
end : function(){
this.reset();
}

HTML结构：

<div class=“canvas”>
<canvas></canvas>
</div>

另外还可以不传入数组图片，自己写内容也可以，js的data不写，html结构如下：

<div class=“canvas”>
<span>50000元</span>
<canvas></canvas>
</div>

自定义内容：

scratcher(‘.canvas_con1’).init({
text : ‘快刮我’,
touchSize : 30,
fontSize : 45,
end : function(){
alert(‘中奖了！’)
}
});

50000元

数组传入内容：

scratcher(‘.canvas_con2’).init({
data : arr,
touchSize : 30,
fontSize : 45,
end : function(){
var t = this;
confirm(‘恭喜你中奖了，是否再来一发！’,function(n){
if(n){
t.reset();
};
})
}
});

可以点击这里下载demo演示

2015/09/11 1 /

/

标签: 暂无标签

评论回复

回复 2016/10/09 1

😎 😉 ➡ 🙄 😥 了