#Lottery.js
#H5移動端大轉盤抽獎插件, 簡單、易用、無依賴。
效果:
##step 1: 引入資源
<canvas id="lottery" width="300" height="300"></canvas>
<button id="handler">開始抽獎</button>
<!-- Lottery Javascript file -->
<script src="Lottery.js"></script>
##step 2: 調用Lottery
new Lottery(document.getElementById('lottery'), {
handler: document.getElementById('handler'),
handlerCallback: function(_interface){
/*ajax獲取中獎結果*/
_ajax(function(response){
/*指定停止的位置:索引*/
_interface.stop(response.index, function(){
console.log('恭喜你中得:' + response.name)
});
});
},
products: [
{
text: '小米電視',
imgUrl: 'http://www.host.com/img1.png'
},
{
text: '華爲手機',
imgUrl: 'http://www.host.com/img2.png'
}
...
]
});
##構造函數 Lottery 的全部配置項.
var _lottery = new Lottery(document.getElementById('lottery'),{
/*點擊抽獎元素*/
handler: '',
/*點擊抽獎的回調*/
handlerCallback: function(_interface){},
outerRadius: '',
innerRadius: 0,
/*循環填充數組顏色*/
fillStyle: ['#ffdf8a', '#fffdc9'],
/*重複觸發的間距時間*/
interval: 1000,
/*速度越大越快*/
speed: 12,
/*運動最少持續時間*/
duration: 3000,
/*字體位置與樣式*/
/*畫布顯示縮放比例,值爲1 安卓模糊*/
scale: this.ua.isIos ? 1 : 4,
/*字體樣式,淺拷貝 需整個font對象傳入*/
font: {
y: '50%',
color: '#ee6500',
style: 'normal',
weight: 500,
size: '12px',
lineHeight: 1,
family: 'Arail'
},
/*圖片位置與尺寸*/
images: {
y: '88%',
width: 32,
height: 32
},
/*打斷文字換行*/
breakText: ['金幣', '紅包'],
/*禮物*/
products: [
/*{
imgUrl: 'http://',
text: '蘋果手機',
}*/
]
});
/*指定停止位置, index爲索引 0-products.length */
_lottery.stop(index, function(){
});
源碼地址:https://github.com/huanggengzhong/Big-turntable