vue ts canvas绘图使用

在 Vue 中使用 TypeScript 进行 Canvas 绘图，可以先在 Vue 组件中创建一个 Canvas 元素，并在 mounted 钩子函数中获取它的 2D 上下文。然后，可以通过编写绘图函数，在其中使用 2D 上下文进行绘图。以下是一个简单的 Vue TypeScript 代码示例：

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

<script lang="ts">
import { Component, Vue } from 'vue';

@Component
export default class MyCanvas extends Vue {
  private ctx: CanvasRenderingContext2D | null = null;

  mounted() {
    // 获取 Canvas 元素的 2D 上下文
    const canvas = this.$refs.canvas as HTMLCanvasElement;
    this.ctx = canvas.getContext('2d');

    // 绘制图形
    this.draw();
  }

  private draw() {
    if (this.ctx) {
      // 绘制矩形
      this.ctx.fillStyle = '#FF0000';
      this.ctx.fillRect(0, 0, 150, 75);

      // 绘制文本
      this.ctx.font = '30px Arial';
      this.ctx.fillText('Hello World', 10, 50);
    }
  }
}
</script>

在上面的代码中，我们首先在模板中创建了一个 Canvas 元素，并且通过 ref 属性将其引用赋值给了组件实例的 canvas 成员变量。接着，在 mounted 钩子函数中获取了该 Canvas 元素的 2D 上下文，并将其赋值给了组件实例的 ctx 成员变量。最后，我们编写了一个 draw 函数，在其中使用 2D 上下文进行绘图。

需要注意的是，在绘图时需要先判断 ctx 是否为 null，因为在某些情况下（如组件销毁时），该值可能为 null。此外，在 Vue 中可以使用 computed 属性和 watch 属性来动态更新 Canvas 中的绘图。