rouletteWheel

功能描述

rouletteWheel是抽奖转盘组件,原生js,压缩仅9kb

依赖模块

快速使用

var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d');
new RouletteWheel({
    centerX: canvas.width / 2,
    centerY: canvas.height / 2,
    outsideRadius: 200,
    awards: [
        { content: 'iphone8' },
        { content: '大保健' },
        { content: '10元话费' },
        { content: '现金30', img: './img/3.png' },
        { content: '30元话费' },
        { content: '优惠券', img: './img/1.png' },
        { content: '100元话费' },
        { type: 'losing', content: '谢谢参与', img: './img/4.png' }
    ],
    finish: function (index) {
        switch (this.awards[index].type) {
            case 'losing':
                alert('💔很遗憾,您没有中奖~');
                break;
            default:
                alert('🎉恭喜您中得:' + this.awards[index].content);
                break;
        }
    }
}).render(canvas, context);

配置项

centerX

  • 类型:Number
  • 作用:大转盘圆心x轴坐标,一般为画布宽度的一半
  • 是否必传:是

    centerY

  • 类型:Number
  • 作用:大转盘圆心y轴坐标,一般为画布高度的一半
  • 是否必传:是

    outsideRadius

  • 类型:Number
  • 作用:大转盘的半径,这个值乘以二不能大于 canvas 画布的宽或者高哟!
  • 是否必传:是

    awards

  • 类型:Array
  • 作用:奖品,支持文字和图片;type=losing 表示未中奖
  • 是否必传:是

finish

  • 类型:Function
  • 作用:抽奖结果
  • 是否必传:是

特别说明

更多配置和用法,请参考examples和源码