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和源码

是否仍需要帮助？ 请保持联络！
最后更新于 2024/04/24