微信小程序大转盘

 小程序调试基础库版本号  2.8.2

遇到的坑: 

canvas是原生组件不能设置微信动画（wxss动画和wx.createAnimation(Object object)）会出现无限循环播放的动画

实现思路

例如：奖品有8种可能

把圆分成8份  每份顺时针旋转360/8角度 

对应的奖品数组  逆时针旋转360/8角度

利用定时器清除并旋转整个画面实现动画   ---------采坑点-----------------

zhuanpan.wxml

<text>sellerPageage/zhuanpan/zhuanpan.wxml</text>
<view class="canvas-wrap">

  <canvas canvas-id="canvas" class="canvas">
    <cover-view class="cover-view">
    <cover-image class="pointer" src="../../images/pointer.png"></cover-image>
    
    <cover-view class="cover-view1" hidden="{{!rotateSwitch}}" catchtap="rotateBtn">
    </cover-view>
    </cover-view>
  </canvas>
<text>{{prize}}</text>
</view>
<button bindtap="rotateBtn">旋转</button>

zhuanpan.wxss

/* sellerPageage/zhuanpan/zhuanpan.wxss */
.canvas-wrap{
  padding:40px 0;
}
.canvas{
  margin:0 auto;
  width:300px;
  height:300px;
  /* background:#ffb43c; */
}
.cover-view {
  position: relative;
  height:100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* opacity: .7; */
}
.cover-view1 {
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
  z-index: 10;
  width:100px;
  height:100px;
  /* background:red; */
  /* opacity: 1; */
}
.pointer{
  width:100%;
  height:100%;
}

zhuanpan.js

// sellerPageage/zhuanpan/zhuanpan.js
Page({
  data:{
    rotateSwitch:true,
    prizeList: ['一等奖', '谢谢参与', '二等奖', '谢谢参与', '三等奖', '谢谢参与', '再转一次', '谢谢参与'],
    prize:'快去抽奖吧'
  },

  turntable(num,item,angle){
    // const colors = ['#00b26a', '#22a4ff', '#f86934', '#ffdc00', '#b002a6', '#a22ff4', '#68f439', '#dff00c']
    const colors = ['#ea6a22', '#e3daeb', '#ea6a22', '#e3daeb', '#ea6a22', '#e3daeb', '#ea6a22', '#e3daeb']
    // 旋转时间
    const time = 1000;    
    //每块平均角度
    const aveAngle = 360/num; 
    // 总共旋转的角度
    const totalAngle = angle * aveAngle + 360 * 3;
    // 每次转多少度
    let step = totalAngle / time*10;

    const ctx = wx.createCanvasContext('canvas');
    function myCanvas(){
      if (arguments.length == 0) {
        currentAngle = aveAngle;
      }
      ctx.translate(150, 150)
      ctx.rotate(currentAngle * Math.PI / 180)
      ctx.save()
      ctx.rotate(((aveAngle * Math.PI / 180) / -2) + 67.5)

      for (var i = 0; i < num; i++) { // 顺时针旋转等分圆
        ctx.save()
        ctx.rotate(i * aveAngle * Math.PI / 180)
        ctx.arc(0, 0, 140, 0, Math.PI / 4)
        ctx.lineTo(0, 0);
        ctx.setFillStyle(colors[i])
        ctx.fill()
        ctx.restore()
      }

      ctx.restore()
      // ctx.rotate(90 * Math.PI / 180)
      // item.reverse();
      for (var i = 0; i < num; i++) { //逆时针旋转文字
        ctx.setFillStyle('#ffffff')
        ctx.setFontSize(12)
        ctx.setTextAlign('center')
        ctx.fillText(item[i], 0, -90)
        ctx.rotate(-aveAngle * Math.PI / 180)
      }
      ctx.draw(false)
      
    }
    if (!angle && angle != 0) {//页面加载完执行
      myCanvas()
      return false;
    }
    let currentAngle = 0;
    let timer =setInterval(() => {
      
      if (totalAngle <= currentAngle) {

        console.log(totalAngle, Math.floor(currentAngle), item[angle], angle)
        clearInterval(timer)
        currentAngle = 0;
        this.setData({
          prize: item[angle],
          rotateSwitch: true
        })
        return false;
      }
      if (totalAngle - currentAngle <= 90) {
        step = 1;
      }
      currentAngle = currentAngle + step;
      myCanvas(angle, Math.floor(currentAngle));
    }, 10)
  },
  rotateBtn(){//抽奖按钮
    if (this.data.rotateSwitch){//正在旋转不能重新旋转
      this.setData({
        rotateSwitch:false
      },()=>{
        this.turntable(8,this.data.prizeList,Math.floor((Math.random() * 8) + 0));//参数： 几份圆 奖品数据 中奖结果
      })
    }
    // this.turntable(0);

  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.turntable(8, this.data.prizeList);
  }

})

上个图