awards: [
            {
                id: "1678684429869957122",
                title: '一等奖',
                name: '纯金50G金元宝',
                icon: 'xxx'
            },
            {
                id: "1678684592919330818",
                title: '二等奖',
                name: '0.58现金红包',
                icon: 'xxx'
            },
            {
                id: "1678684695847550977",
                // title:'三等奖',
                title: '更多好礼',
                icon: 'xxx'
            },
            {
                id: "1678684847689744385",
                title: '四等奖',
                name: '华为运动手环',
                icon: 'xxx'
            },
            {
                id: "1678686592151109634",
                title: '五等奖',
                name: '1.18现金红包',
                icon: 'xxx'
            },
            {
                id: "1678686724460429314",
                title: '特等奖',
                name: '京东优惠券',
                icon: 'xxx'
            },
            {
                id: "1678686818400256002",
                title: '六等奖',
                name: '0.18现金红包',
                icon: 'xxx'
            }
        ],
        trunTime: 6000,
        animationData: {},
        chance: true,
        runDegs:0,
        awardsList:[]

drawTruntable() {
        var awardsConfig = this.data.awards,
            len = awardsConfig.length,
            awardsList = []
            // var turnNum = 1 / len
            var turnNum = 1 / awardsConfig.length * 360; // 文字旋转 turn 值 
        for (var i = 0; i < len; i++) {
            // 奖项列表
            awardsList.push({
                // turn: i * turnNum + 'turn',  // 文字旋转turn 值
                turn: (i * turnNum)  + 'deg',  // 文字旋转turn 值
                lineTurn: i * turnNum + turnNum / 2 + 'turn', // 线条旋转turn 值
                award: awardsConfig[i].name,  // 文字
                title: awardsConfig[i].title,
                icon: awardsConfig[i].icon
            });
        }
        this.setData({
            awardsList: awardsList
        });
       console.log(this.data.awardsList);
    },
    getLottery() {
        var awardsConfig = this.data.awardsList
        var runNum = 8
        let chance = this.data.chance
        const trunTime = this.data.trunTime
        var that = this
        var id ='1678686724460429314'
        var awardIndex = awardsConfig.findIndex(item => {
            if (item.id === id) {  
                return true
            }
        })
        
        // var awardIndex = Math.random() * awardsConfig.length >>> 0;
        console.log(awardIndex);
        // 获取奖品配置
        if (awardIndex < 2) chance = false

        // 旋转抽奖
        let runDegs = that.data.runDegs || 0
        console.log(that.data.runDegs, '++++');
        console.log(360 - runDegs % 360,'360 - runDegs % 360');
        console.log(360 * runNum - awardIndex * (360 / awardsConfig.length));
        runDegs = runDegs + (360 - runDegs % 360) + (360 * runNum - awardIndex * (360 / awardsConfig.length))
        var animationRun = wx.createAnimation({
            duration: trunTime,
            timingFunction: 'ease'
        })
        that.setData({
            runDegs
        })
        console.log(that.data.runDegs, '=======');
        that.animationRun = animationRun
        animationRun.rotate(that.data.runDegs).step()
        that.setData({
            animationData: animationRun.export(),
        })

        console.log(that.data.animationData);
        // 中奖提示
        setTimeout(function () {
            wx.showModal({
                title: '恭喜',
                content: '获得`' + (awardsConfig[awardIndex].name) + "`",
                showCancel: false
            })
        }, trunTime, that);
    },

<view class="wrapper">
  <view class="main">
    <view class="table-container">
      <view class="table-content" animation="{{animationData}}">
        <!-- <view class="table-line">
          <view class="table-litem" wx:for="{{awardsList}}" wx:key="unique" style="-webkit-transform: rotate({{item.lineTurn}});transform: rotate({{item.lineTurn}})"></view>
        </view> -->
        <view class="table-list">
          <view class="table-item" wx:for="{{awardsList}}" wx:key="unique">
            <view class="table-item-text" style="-webkit-transform: rotate({{item.turn}});transform: rotate({{item.turn}})">
              <view class="title">{{item.title || ''}}</view>
              <view class="award">{{item.award || ''}}</view>
              <image class="awardImg" src="{{item.icon || ''}}" />
            </view>
          </view>
        </view>
      </view>
      <view bindtap="getLottery" class="table-btn {{btnDisabled}}">开始</view>
    </view>
  </view>
</view>

page {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

view {
  box-sizing: border-box;
}
/* 转盘 */
.table-container ul,
.table-container li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.table-container {
  margin: 0 auto;
  margin-top: 20rpx;
  position: relative;
  width: 579rpx;
  height: 579rpx;
  border-radius: 50%;
  /*border: 2px solid #E44025;*/
  // box-shadow: 0 2px 3px #333,
  //   0 0 2px #000;
}

.table-content {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  display: block;
  width: 579rpx;
  height: 579rpx;
  background: url('/images/转盘带背景.png') no-repeat;
  background-size: 100% 100%;
}

/*选项*/
.table-list {
  position: absolute;
  left: 0;
  top: 0;
  width: inherit;
  height: inherit;
  z-index: 9;
}

.table-item {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  color: #e4370e;
  font-weight: bold;
  // text-shadow: 0 1px 1px rgba(255, 255, 255, .6);
}

.table-item-text {
  position: relative;
  display: block;
  padding-top: 70rpx;
  // padding-top: 20px;
  /* width: 50px; */
  margin: 0 auto;
  text-align: center;
  -webkit-transform-origin: 50% 300rpx;
  transform-origin: 50% 300rpx;
  // -webkit-transform-origin: 50% 50%;
  // transform-origin: 50% 50%;
  word-wrap: break-word;
  width: 200rpx;
}
.title{
  font-family: PingFang SC;
  font-weight: 600;
  font-size: 22rpx;
  /* 三等奖 */
  color: #D70D19;
}
.award{
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 22rpx;
  /* 三等奖 */
  color: #333;
}
.awardImg{
  width: 72rpx;
  height: 56rpx;
}
/* 分隔线 */
.table-line {
  position: absolute;
  left: 0;
  top: 0;
  width: inherit;
  height: inherit;
  z-index: 99;
}

.table-litem {
  position: absolute;
  left: 150px;
  top: 0;
  width: 1px;
  height: 150px;
  background-color: rgba(228, 55, 14, .4);
  overflow: hidden;
  -webkit-transform-origin: 50% 150px;
  transform-origin: 50% 150px;
}


.table-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  // left: 110px;
  // top: 110px;
  z-index: 400;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  color: #F4E9CC;
  background-color: #E44025;
  line-height: 80px;
  text-align: center;
  font-size: 20px;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, .6);
  box-shadow: 0 3px 5px rgba(0, 0, 0, .6);
  text-decoration: none;
}

.table-btn::after {
  position: absolute;
  display: block;
  /* before和:after时必须设置其content属性，否则伪元素就不起作用 */
  content: ' ';
  left: 10px;
  top: -46px;
  width: 0;
  height: 0;
  overflow: hidden;
  border-width: 30px;
  border-style: solid;
  border-color: transparent;
  border-bottom-color: #E44025;
}

/* .table-btn.disabled{
    pointer-events: none;
    background: #B07A7B;
    color: #ccc;
}
.table-btn.disabled::after{
  border-bottom-color: #B07A7B;
} */


.gb-run {
  -webkit-transition: all 6s ease;
  transition: all 6s ease;
}

.canvas-container {
  background-color: white;
  margin: 2% 2%;
  border: green 1rpx solid;
  width: 95%;
  height: 80%;
  margin-bottom: 10%;
}

#myCanvas {
  /* float: 100%; */
  width: 100%;
  height: 100%;
}

需要的素材（必须是圆形的，否则转起来会很晃）

转盘带背景.png

最后成图

image.png