如何通过Html5-canvas呈现Vue组件

<template>
  <div>
    <canvas ref="myCanvas" width="600" height="400"></canvas>
  </div>
</template>

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

const myCanvas = ref(null);
const drawContext = ref(null);

// 假设这是你的数据模型
const dataToDraw = ref([
  { x: 50, y: 50, radius: 20, color: 'red' },
  // ... more data points
]);

onMounted(() => {
  drawContext.value = myCanvas.value.getContext('2d');
  draw();
});

// 监听数据变化并重新绘制
watchEffect(() => {
  draw();
});

function draw() {
  if (!drawContext.value) return;

  // 清除画布
  drawContext.value.clearRect(0, 0, myCanvas.value.width, myCanvas.value.height);

  // 绘制数据
  dataToDraw.value.forEach((dot) => {
    drawContext.value.beginPath();
    drawContext.value.arc(dot.x, dot.y, dot.radius, 0, Math.PI * 2);
    drawContext.value.fillStyle = dot.color;
    drawContext.value.fill();
  });
}
</script>