如何使用TypeScript+Vue在页面加载时通过Canvas绘制图形？

不需要引入带画板功能的库，直接用原生Canvas API就能实现你的需求，核心是在Vue组件挂载完成后获取Canvas元素并操作其2D上下文。以下是具体实现步骤和代码示例：

步骤1：在Vue模板中定义Canvas元素 #

首先在组件的模板里添加指定ID的Canvas元素，设置好宽高：

<template>
  <div>
    <canvas id="myCanvas" width="400" height="300" style="border: 1px solid #ccc;"></canvas>
  </div>
</template>

步骤2：在组件挂载完成后执行绘图逻辑 #

Vue组件挂载完成后（此时DOM已渲染，能获取到Canvas元素），通过ID获取Canvas实例，拿到2D绘图上下文，再调用原生API绘制图形。以下是Vue3 + TypeScript的<script setup>写法：

<script setup lang="ts">
import { onMounted } from 'vue';

onMounted(() => {
  // 通过ID获取Canvas元素
  const canvas = document.getElementById('myCanvas') as HTMLCanvasElement;
  if (!canvas) return;

  const ctx = canvas.getContext('2d');
  if (!ctx) return;

  // 封装绘图函数
  const drawLine = (x1: number, y1: number, x2: number, y2: number) => {
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.strokeStyle = '#000';
    ctx.lineWidth = 2;
    ctx.stroke();
  };

  const drawCircle = (x: number, y: number, radius: number) => {
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI * 2);
    ctx.fillStyle = '#42b983';
    ctx.fill();
    ctx.strokeStyle = '#000';
    ctx.stroke();
  };

  const drawPoint = (x: number, y: number) => {
    // 用小矩形绘制点
    ctx.fillStyle = '#ff4444';
    ctx.fillRect(x - 2, y - 2, 4, 4);
    // 也可以用小圆点：
    // ctx.beginPath();
    // ctx.arc(x, y, 2, 0, Math.PI * 2);
    // ctx.fill();
  };

  // 调用绘图函数
  drawLine(50, 50, 350, 50);
  drawCircle(200, 150, 50);
  drawPoint(200, 150);
});
</script>

关键说明 #

• 使用onMounted钩子：确保组件挂载完成后再操作DOM，此时Canvas元素已经存在于页面中
• TypeScript类型断言：as HTMLCanvasElement用来告诉TS编译器获取到的元素是Canvas类型，避免类型报错
• 原生Canvas API：所有绘图逻辑都基于浏览器内置的Canvas 2D上下文API，无需额外依赖，完全符合你要的"简便方案"

如果是Vue2项目，逻辑类似，只是把onMounted换成mounted钩子，脚本写法改成Options API即可：

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  mounted() {
    const canvas = document.getElementById('myCanvas') as HTMLCanvasElement;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    if (!ctx) return;

    // 同样的绘图函数和调用逻辑...
  }
});
</script>

内容的提问来源于stack exchange，提问作者codeninja