GB Canvas Turntable —— 基于canvas的转盘抽奖js插件

GB Canvas Turntable是一款 —— 基于canvas的适用于移动端的Canvas绘制可配置的转盘抽奖插件，次插件可设置终奖产品（可以指定也可以随机），而且会将产品自动生成到canvas中，而且支持理论上无限产品，可以设置抽奖次数，当抽奖次数用完，直接置灰，无法再抽奖。
1、引入css

<link rel="stylesheet" type="text/css" href="GB-canvas-turntable.css">

2、加入html

<section id="turntable" class="gb-turntable">
    <div class="gb-turntable-container">
        <canvas class="gb-turntable-canvas" width="300" height="300px">抱歉！浏览器不支持。</canvas>
    </div>
    <a class="gb-turntable-btn" href="javascript:;">抽奖</a>    
</section>

3、引入js

<script type="text/javascript" src="GB-canvas-turntable.js"></script>

4、调用代码：

document.addEventListener('DOMContentLoaded', function() {
    gbTurntable.init({
        id: 'turntable',
        config: function(callback){
            // 获取奖品信息
            callback && callback([{
                text: '1亿的私人飞机',
                img: 'http://www.5imoban.net/view/demoimg/airplane_grey.png'
              }, {
                text: '2元红包'
              }, {
                text: '3元红包'
              }, {
                text: '美女一枚',
                img: 'http://www.5imoban.net/view/demoimg/u.jpg'
              }, {
                text: '5元红宝'
              }, {
                text: '6元红宝'
              }])
        },
        getPrize: function(callback) {
            // 获取中奖信息
            var num = Math.random() * 6 >>> 0,   //奖品ID
                chances = num;  // 可抽奖次数
                callback && callback([num, chances]);   
        },
        gotBack: function(data) {
            alert('恭喜抽中' + data);
        }
    });
}, false);

参数解析：
getPrize的回调函数的第一个参数，就是上面奖品列表的索引值，表示第几个产品中将，您可以写死也可以随机或者加入概率计算等，第二个参数是抽奖的次数。两个参数以数组形式传入


部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！