vue3+uniapp创建canvas轮盘

请修改为vue3+uniapp的canvas轮盘

function drawRouletteWheel() {
  var canvas = document.getElementById("wheelCanvas");
  let num = winnerList.length;
  var width = 211;
  // let arc = Math.PI / (num / 2);
  if (canvas.getContext) {
    var arc = Math.PI / (num / 2);
    var ctx = canvas.getContext("2d");
    //在给定矩形内清空一个矩形
    ctx.clearRect(0, 0, width * 2, width * 2);
    //strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式
    ctx.strokeStyle = "#fff";

    for (let i = 0; i < num; i++) {
      let angle = 0 + i * arc;
      ctx.save();
      if ((i + 1) % 2 == 0) {
        ctx.fillStyle = "#fff";
      } else {
        ctx.fillStyle = "#008ed6";
      }
      ctx.beginPath();
      ctx.arc(width, width, turnplate.outsideRadius, angle, angle + arc, false);
      ctx.arc(width, width, turnplate.insideRadius, angle + arc, angle, true);
      ctx.stroke();
      ctx.fill();
      //锁画布(为了保存之前的画布状态)
      ctx.save();
      //奖品默认字体颜色
      // this.ctx.fillStyle = "#fff";
      ctx.fillStyle = "#000";
      let text = winnerList[i].content;
      ctx.translate(
        width + Math.cos(angle + arc / 2) * (width - 20),
        width + Math.sin(angle + arc / 2) * (width - 20)
      );
      ctx.rotate(angle + arc / 2 + Math.PI / 2);
      //将字体绘制在对应坐标
      ctx.fillText(text, -ctx.measureText(text).width / 2, 20);
      //设置字体
      // this.ctx.font = " 14px Microsoft YaHei";
      ctx.restore();
      //绘制奖品图片
      if (winnerList[i].img) {
        let img = new Image();
        img.src = winnerList[i].img;
        img.onload = () => {
          ctx.save();
          ctx.translate(
            width + Math.cos(angle + arc / 2) * (width - 40),
            width + Math.sin(angle + arc / 2) * (width - 40)
          );
          ctx.rotate(angle + arc / 2);
          ctx.drawImage(
            img,
            -ctx.measureText(text).width / 2 - 60,
            -35,
            60,
            60
          );
          ctx.restore();
        };
      }
    }
  }
}

<template>
  <canvas ref="canvas" :width="width" :height="width"></canvas>
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
  name: 'RouletteWheel',
  props: {
    winnerList: {
      type: Array,
      required: true
    },
    turnplate: {
      type: Object,
      required: true
    },
    width: {
      type: Number,
      default: 422
    }
  },
  setup(props) {
    const canvasRef = ref(null)

    const drawRouletteWheel = () => {
      const canvas = canvasRef.value
      const num = props.winnerList.length
      const width = props.width / 2
      const arc = Math.PI / (num / 2)

      if (canvas.getContext) {
        const ctx = canvas.getContext('2d')
        ctx.clearRect(0, 0, props.width, props.width)
        ctx.strokeStyle = '#fff'

        for (let i = 0; i < num; i++) {
          const angle = 0 + i * arc
          ctx.save()

          if ((i + 1) % 2 == 0) {
            ctx.fillStyle = '#fff'
          } else {
            ctx.fillStyle = '#008ed6'
          }

          ctx.beginPath()
          ctx.arc(width, width, props.turnplate.outsideRadius, angle, angle + arc, false)
          ctx.arc(width, width, props.turnplate.insideRadius, angle + arc, angle, true)
          ctx.stroke()
          ctx.fill()

          ctx.save()
          ctx.fillStyle = '#000'
          const text = props.winnerList[i].content
          ctx.translate(
            width + Math.cos(angle + arc / 2) * (width - 20),
            width + Math.sin(angle + arc / 2) * (width - 20)
          )
          ctx.rotate(angle + arc / 2 + Math.PI / 2)
          ctx.fillText(text, -ctx.measureText(text).width / 2, 20)
          ctx.restore()

          if (props.winnerList[i].img) {
            const img = new Image()
            img.src = props.winnerList[i].img
            img.onload = () => {
              ctx.save()
              ctx.translate(
                width + Math.cos(angle + arc / 2) * (width - 40),
                width + Math.sin(angle + arc / 2) * (width - 40)
              )
              ctx.rotate(angle + arc / 2)
              ctx.drawImage(
                img,
                -ctx.measureText(text).width / 2 - 60,
                -35,
                60,
                60
              )
              ctx.restore()
            }
          }
        }
      }
    }

    onMounted(() => {
      drawRouletteWheel()
    })

    return {
      canvasRef
    }
  }
}
</script>