Javascript 如何在Vue中清除画布？

我必须在点击按钮时清除画布。我想我尝试了各种方法来清洁它，这是我在网上找到的。我清除了画布，但当我再次开始绘制（在清除的画布上）时，上一个图形又回来了。我将在下面的步骤中向您展示这一点

步骤1：第一张图纸

第2步：通过单击具有清除功能的按钮清除画布（请在下面的“我的代码”中进行检查）。结果：画布清晰。

步骤3：我开始在清晰的画布上绘制，但当鼠标向上移动时，新的绘图与旧的绘图一起出现。

我不想要这张旧的“鬼”画，我想把它弄清楚，我需要完全清晰的画布来画一张全新的画。有人能帮我吗？提前谢谢

代码：

Play.vue

<template>
  <div class="play">
    <Canvas/>    
  </div>
</template>

<script>
export default {
  name: "play",
  components: {
    Canvas
  }
}
</script>

导出默认值{
名称：“播放”，
组成部分：{
帆布
}
}

Canvas.vue

<template>
  <div class="main">
    <canvas id="canvas"></canvas>
    <button v-on:click="clear">clear</button>
  </div>
</template>

<script>
import { fabric } from "fabric";

export default {
  name: "Canvas",
  data: () => ({
    canvas: null
  }),
  methods: {
    clear: function () {
      var ctx = this.canvas.getContext("2d");
      ctx.beginPath();
      ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
  },
  mounted() {
    this.canvas = new fabric.Canvas("canvas");
    ...
  }
}
</script>

清楚的
从“fabric”导入{fabric}；
导出默认值{
名称：“画布”，
数据：（）=>({
画布：空
}),
方法：{
清除：函数（）{
var ctx=this.canvas.getContext（“2d”）；
ctx.beginPath（）；
clearRect（0，0，this.canvas.width，this.canvas.height）；
}
},
安装的（）{
this.canvas=新的fabric.canvas（“canvas”）；
...
}
}

您需要在织物画布的实例上使用

    clear: function () {
      this.canvas.clear();
    }

---

@我建议不要将其命名为

Canvas

btw，因为这是本机元素