[英]How to clear canvas in Vue?
I have to clear my canvas on click at button.我必须在单击按钮时清除我的 canvas。 I think I tried every way to clean it, which I found on the internet.
我想我尝试了各种方法来清洁它,这是我在互联网上找到的。 I clear my canvas, but when I start to draw again (on clear canvas), the previous drawing is coming back.
我清除了我的 canvas,但是当我再次开始绘制(在透明画布上)时,之前的绘图又回来了。 I'll show you this in steps below.
我将在下面的步骤中向您展示这一点。
STEP 1: first drawing第 1 步:第一次绘图
STEP 2: clearing the canvas by clicking on button with function clear (please check below in my code).第 2 步:通过单击 function 清除按钮来清除 canvas(请在我的代码中检查以下内容)。 Result: canvas is clear.
结果:canvas 清晰。
STEP 3: I start to draw on clear canvas, but when mouse-up, a new drawing appears with the old one.第 3 步:我开始在清晰的 canvas 上绘图,但是当鼠标向上时,会出现一个新的绘图和旧的绘图。
I don't want this old "ghost" drawing, I want to clear it, I need fully clear canvas to draw completely new drawing.我不要这张旧的“鬼”图,我要清除它,我需要完全清除 canvas 才能绘制全新的图形。 Can anyone help me?
谁能帮我? Thanks in advance.
提前致谢。
CODE:代码:
Play.vue播放.vue
<template>
<div class="play">
<Canvas/>
</div>
</template>
<script>
export default {
name: "play",
components: {
Canvas
}
}
</script>
Canvas.vue 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.