luckylottery

功能描述

luckylottery转盘抽奖

依赖的模块

快速使用

luckylottery - 图1

step 1: 引入资源

  1. <canvas id="lottery" width="300" height="300"></canvas>
  2. <button id="handler">开始抽奖</button>
  4. <!-- Lottery Javascript file -->
  5. <script src="lottery.js"></script>

step 2: 调用Lottery

  1. new Lottery(document.getElementById('lottery'), {
  2.     handler: document.getElementById('handler'),
  3.     handlerCallback: function(_interface){
  4.         /*ajax获取中奖结果*/
  5.         _ajax(function(response){
  6.             /*指定停止的位置:索引*/
  7.             _interface.stop(response.index, function(){
  8.                 console.log('恭喜你中得:' + response.name)
  9.             });
  10.         });
  11.     },
  12.     products: [
  13.         {
  14.             text: '小米电视',
  15.             imgUrl: 'http://www.host.com/img1.png'
  16.         },
  17.         {
  18.             text: '华为手机',
  19.             imgUrl: 'http://www.host.com/img2.png'
  20.         }
  21.         ...
  22.     ]
  23. });

构造函数 Lottery 的全部配置项.

  2. var _lottery = new Lottery(document.getElementById('lottery'),{
  3.     /*点击抽奖元素*/
  4.     handler: '',
  5.     /*点击抽奖的回调*/
  6.     handlerCallback: function(_interface){},
  7.     outerRadius: '',
  8.     innerRadius: 0,
  9.     /*循环填充数组颜色*/
  10.     fillStyle: ['#ffdf8a', '#fffdc9'],
  11.     /*重复触发的间距时间*/
  12.     interval: 1000,
  13.     /*速度越大越快*/
  14.     speed: 12,
  15.     /*运动最少持续时间*/
  16.     duration: 3000,
  17.     /*字体位置与样式*/
  18.     /*画布显示缩放比例,值为1 安卓模糊*/
  19.     scale: this.ua.isIos ? 1 : 4,
  20.     /*字体样式,浅拷贝 需整个font对象传入*/
  21.     font: {
  22.         y: '50%',
  23.         color: '#ee6500',
  24.         style: 'normal',
  25.         weight: 500,
  26.         size: '12px',
  27.         lineHeight: 1,
  28.         family: 'Arail'
  29.     },
  30.     /*图片位置与尺寸*/
  31.     images: {
  32.         y: '88%',
  33.         width: 32,
  34.         height: 32
  35.     },
  36.     /*打断文字换行*/
  37.     breakText: ['金币', '红包'],
  38.     /*礼物*/
  39.     products: [
  40.         /*{
  41.             imgUrl: 'http://',
  42.             text: '苹果手机',
  43.         }*/
  44.     ]
  45. });
  47. /*指定停止位置, index为索引 0-products.length */
  48. _lottery.stop(index, function(){
  50. });

特别说明