rouletteWheel

功能描述

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

依赖模块

无

快速使用

  1. var canvas = document.getElementById('canvas'),
  2.     context = canvas.getContext('2d');
  3. new RouletteWheel({
  4.     centerX: canvas.width / 2,
  5.     centerY: canvas.height / 2,
  6.     outsideRadius: 200,
  7.     awards: [
  8.         { content: 'iphone8' },
  9.         { content: '大保健' },
  10.         { content: '10元话费' },
  11.         { content: '现金30', img: './img/3.png' },
  12.         { content: '30元话费' },
  13.         { content: '优惠券', img: './img/1.png' },
  14.         { content: '100元话费' },
  15.         { type: 'losing', content: '谢谢参与', img: './img/4.png' }
  16.     ],
  17.     finish: function (index) {
  18.         switch (this.awards[index].type) {
  19.             case 'losing':
  20.                 alert('💔很遗憾，您没有中奖~');
  21.                 break;
  22.             default:
  23.                 alert('🎉恭喜您中得：' + this.awards[index].content);
  24.                 break;
  25.         }
  26.     }
  27. }).render(canvas, context);

配置项

centerX

  • 类型：Number
  • 作用：大转盘圆心x轴坐标，一般为画布宽度的一半

  • 是否必传：是

    centerY

  • 类型：Number

  • 作用：大转盘圆心y轴坐标，一般为画布高度的一半

  • 是否必传：是

    outsideRadius

  • 类型：Number

  • 作用：大转盘的半径，这个值乘以二不能大于 canvas 画布的宽或者高哟！

  • 是否必传：是

    awards

  • 类型：Array

  • 作用：奖品，支持文字和图片；type=losing 表示未中奖
  • 是否必传：是

finish

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

特别说明

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