vue3 canvas

// Vue 3 + Canvas 示例代码

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

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

export default {
  setup() {
    const myCanvas = ref(null);

    // 在组件挂载后绘制 canvas
    onMounted(() => {
      const ctx = myCanvas.value.getContext('2d');

      // 绘制一个简单的矩形
      ctx.fillStyle = 'green';
      ctx.fillRect(10, 10, 150, 100);

      // 绘制一个圆形
      ctx.beginPath();
      ctx.arc(240, 75, 50, 0, 2 * Math.PI);
      ctx.fillStyle = 'blue';
      ctx.fill();
      ctx.closePath();

      // 绘制一些文本
      ctx.font = '30px Arial';
      ctx.fillStyle = 'red';
      ctx.fillText('Hello Vue 3 + Canvas', 10, 200);
    });

    return {
      myCanvas,
    };
  },
};
</script>

<style scoped>
canvas {
  border: 1px solid black;
}
</style>

解释说明：

1. 模板部分：使用 <canvas> 标签创建一个画布，并通过 ref 绑定到 JavaScript 中的变量 myCanvas。
2. 脚本部分：
   • 使用 ref 来引用 DOM 元素（即 <canvas>）。
   • 使用 onMounted 钩子在组件挂载后执行绘图逻辑。
   • 获取画布的上下文 (getContext('2d')) 并进行绘图操作，包括绘制矩形、圆形和文本。
3. 样式部分：为画布添加边框以便更清晰地看到其边界。

这个示例展示了如何在 Vue 3 中使用原生的 HTML5 Canvas API 进行绘图。