A scratch card plug-in for HTML5 that can be used on PC or mobile. 一个可以用于PC端和移动端的HTML5刮刮卡插件。
本插件不做UI,需要自己实现html、css部分,当然这部分极其简单。 本插件基于canvas实现,你需要自己定义canvas的css相关属性 position、width、height 例如: div.box 作为父元素,奖品内容可以写在里面。 canvas#canvas作为刮奖遮罩,需要定位覆盖到 div.box上面。
<div class="box">
<div class="boxin"></div>
<canvas id="canvas" width="600" height="200"></canvas>
</div>
.box{ position: relative; width: 600px; height: 200px; border: 1px solid ;}
#canvas{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
var scratchCard = new ScratchCard({
id : '#canvas' , //canvas 的选择器(可以是class,但最终只会选择1个)
maskColor : '#ccc' , //canvas底色,(如果遮罩图片是jpg可以不写)
maskImage : './img/01.jpg', //遮罩图片路径(推荐使用jpg,防止出现透明部分)(如果只需要纯色,可以只设置maskColor)
//画完遮罩后,可以执行其他内容,如:从后台取数据、在遮罩上画其他内容
maskBack : function(){
var _this = scratchCard; //使用实例scratchCard来调用各种方法
console.log('去取数据。。。');
},
openPercent : 0.6, //刮开多少后全部显示 范围:0< x < 1,默认0.6
//每次刮动后的回调
progressBack : function(progress){
console.log('刮开进度:',progress);
},
//完全刮开后的回调
endBack : function(){
console.log('刮奖完成。。。')
},
//endHide : true, //画完后 canvas 是否会 display:none; 默认true
//dpi : 1, //设备dpi,默认会自动根据设备取出,会决定canvas真实大小(高清倍率),也可强制设置。如果要在canvas上操作,坐标应该乘上dpi。
}) ;
canvas : canvas dom对象
paint : 画笔对象(ctx)
canvasWidth : canvas修改后的 width 属性值,等于 canvas.width
canvasHeight : canvas修改后的 height 属性值,等于 canvas.height
dpi : 设备dpi(高清倍率)
reset : 完全重置刮刮卡
pause : 暂停使用刮刮卡,调用后无法擦除
continue : 恢复使用刮刮卡,调用后可用继续擦除
paintImage (src,x,y,w,h,callback,dpi)
//画一张图片。 注意:这是一个异步操作
@src : 图片路径
@x,y,w,h : 画布坐标x,y,图片宽高w,h
@callback : 图片画完之后的回调
@dpi : 默认会取设备dpi对参数进行修正,如果不需要,需设置为1
return : 该图片dom对象
paintText (conf,dpi)
//画文字
@conf : {
text : '', // * 文本
fillStyle : '', // * 填充样式 二选一
strokeStyle : '', // * 描边样式 二选一
x : 10, // *文字坐标x
y : 10, // *文字坐标y
font : '', //合写的font属性,与css相同(顺序font-style font-variant font-weight font-size/line-height font-famil)
textAlign : '', //水平对齐方式
textBaseline : '', //基线
}
@dpi : 默认会取设备dpi对参数进行修正,如果不需要,需设置为1
paintLine (x1,y1,x2,y2,color,width,lineCap,dpi)
@ x1,y1 第一个点的坐标
@ x2,y2 第二个点的坐标
@ color 线的颜色 默认 #000
@ width 线宽 默认 1
@ lineCap 线条末端线帽样式
@dpi : 默认会取设备dpi对参数进行修正,如果不需要,需设置为1