vue 3使用原生canvas_vue使用canvas清空

在 Vue 3 中使用原生 Canvas 实现签名功能，可以通过以下步骤实现清空功能：

1. 在 Vue 组件中，使用 `ref` 获取到 Canvas 元素。
2. 在 `mounted()` 钩子函数中，获取 Canvas 的 2D 上下文对象。
3. 在组件的方法中，调用 `clearRect()` 方法清空画布。

代码示例如下：

<template>
  <div>
    <canvas ref="canvas"></canvas>
    <button @click="clearCanvas">清空</button>
  </div>
</template>

<script>
export default {
  mounted() {
    const canvas = this.$refs.canvas;
    this.context = canvas.getContext('2d');
  },
  methods: {
    clearCanvas() {
      const canvas = this.$refs.canvas;
      this.context.clearRect(0, 0, canvas.width, canvas.height);
    }
  }
};
</script>

在上述代码中，使用 `ref` 获取到 Canvas 元素，并在 `mounted()` 钩子函数中获取 Canvas 的 2D 上下文对象 `context`。在 `clearCanvas()` 方法中，调用 `clearRect()` 方法清空画布。需要注意的是，由于 `context` 对象需要在多个方法中使用，因此需要将其定义为组件的属性。