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