Я должен очистить холст при нажатии на кнопку. Я думаю, что я пытался всеми способами очистить его, который я нашел на inte rnet. Я очищаю свой холст, но когда я начинаю рисовать снова (на чистом холсте), предыдущий рисунок возвращается. Я покажу вам это в следующих шагах.
ШАГ 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>