如何在Vue中清除画布？

Question

我必须在单击按钮时清除画布。我想我尝试了各种方法来清洁它，这是我在互联网上找到的。我清除了我的画布，但是当我再次开始绘画（在清除画布上）时，之前的绘画又回来了。我将按以下步骤向您展示。

第 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>

Answer 1

您需要在织物画布的实例上使用.clear()

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