抽奖刮刮乐 使用文档

js地址：http://marketing.lechebang.com/assets/cup/guaguale.js

直接浏览器打开 ctrl+s

效果图

 

 

 

html：能够是任意你想使用的标签

<div id="guaguale-canvas">
</div>

js：

var guaguale=new Guaguale('#guaguale-canvas',{      

radius:1,
removePercent:0.3,
cover:{
type:'img',                                                                 
cover:'./euro_files/imgs/awardcover.png',
backgroundcolor:'#CCC',
color:'#FFF',
fontSize:'16px',
fontStyle:'Bold',
lineWidth:60
},
start:function(e){

　　//开始滑动时你想处理的逻辑
},
move:function(){

　　//刮动过程当中你想处理的逻辑。
},
end:function(){

　　//刮完之后你想处理的逻辑，好比你想将中奖结果回传服务器
}

});

参数：

‘#guaguale-canvas’  对应的html标签选择器；

radius： 画笔的半径,可不传，不传默认是10px;

removePercent: 百分比 0到1之间， 擦除多少比例，自动所有清除画布，可不传（没有自动清除功能）

cover：object 类型 （图片看不清的话，请右键新标签页打开查看）

　　

使用：

guaguale.init(obj);

obj为object类型，

var obj={ready:false,totalLength:1,contents:[]};

ready:bool型：true 能够刮开，false，不能够刮开。 如：刮奖次数没了，设置false 禁止用户刮开。

totalLength： int 型, 刮奖内容页显示，可能有的内容有多行（以下图 左边totalLength=3 包括title 、兑换码、和再来一次按钮，右边totalLength=2）

contents: 抽奖画布显示内容，为数组类型 以做图为例：

obj.contents.push(
      {title:‘128元乐车邦优惠券’,x:1,y:0.9,type:'text',fontStyle:'#FF2A06'},
      {title:'兑换码:',x:0.5,y:1.6,type:'text',fontStyle:'#333'},
      {title:‘13’,x:1.23,y:1.6,type:'text',fontStyle:'#FF2A06'},
      {title:'再来一次',x1:0.7,y1:2,x2:1,y2:2.5,type:'button',coverStyle:'#FF5F44',fontStyle:'#fff'}
);

contents内容参数：

title：显示内容

x:0 ~ 1 内容据画布水平位置，以文字居中显示为基准调整x大小 ，eg: x=0.5时， 文字内容为画布中间位置*0.5 即 画布1/4 位置

y：0~1 内容据画布垂直位置，eg:y=0.5时， 文字内容为画布高度*0.5 即 画布水平居中显示。

type： text或者button  档位botton时 效果为上图再来一次按钮。

fontStyle： 显示文字的颜色。

coverStyle： 按钮背景色。