抽獎刮刮樂 使用文檔

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： 按鈕背景色。