vue实现抽奖转盘

转盘组件代码如下

<template>
  <div class="turntable" ref="turntable">
    <div class="myTurntable" :style="{transform: rotateAngle, transition: rotateTransition}">
      <canvas id="canvas" ref="canvas">
        当前浏览器版本过低,请使用其他浏览器尝试
      </canvas>
      <div class="prize-container">
        <div v-for="(item, index) in prizeData" :key="index" class="item" :style="getRotateAngle(index)">
          <slot name="item" :item="item"></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'round-turntable',
    mounted() {
      this.init();
    },
    props: {
      prizeData: {
        required: true
      },
      rotateCircle: {
        default: 6
      },
      turntableStyleOption: {
        default: () => {
          return {
            // 背景色
            prizeBgColors: ['#ffdfd4', '#fffdfe', '#ffdfd4', '#fffdfe', '#ffdfd4', '#fffdfe', '#ffdfd4', '#fffdfe'],
            // 转盘的外边框颜色
            borderColor: '#f9dc84'
          };
        }
      },
      duringTime: {
        default: 4.5
      }
    },
    data() {
      return {
        // 开始转动的角度
        startRotateDegree: 0,
        rotateAngle: 0,
        rotateTransition: ''
      };
    },
    methods: {
      // 根据index计算每一格要旋转的角度的样式
      getRotateAngle(index) {
        const angle = 360 / this.prizeData.length * index + (180 / this.prizeData.length);
        return {
          transform: `rotate(${angle}deg)`
        };
      },
      // 初始化圆形转盘canvas
      init() {
        // 各种数据
        const data = this.turntableStyleOption;
        const prizeNum = this.prizeData.length;
        const { prizeBgColors, borderColor } = data;