试图获得“;橡皮擦”;使用HTML5 Canvas和Vaadin，但它只是清除了

Trying to get an "eraser" working with the HTML5 Canvas and Vaadin, but it just clears

本文关键字：Vaadin 清除 HTML5 橡皮擦 使用 Canvas      更新时间：2024-02-10

我正在使用Vaadin，并试图为一些简单的涂鸦提供画布部分。为了实现这一点，我正在使用Vaadin的CanvasPlus库，它运行得很好，但我不知道如何让它擦除我画的东西。

当用户点击时，我得到坐标并开始在那里绘图：

canvas.beginPath();
canvas.moveTo(relativeX, relativeY);

然后在下一次鼠标移动时，我开始连接他们所画的线：

canvas.lineTo(relativeX, relativeY);
canvas.setStrokeStyle(color);
canvas.stroke();

根据这个答案，当他们点击擦除时，我称之为：

canvas.setGlobalAlpha(0.0);
canvas.setStrokeStyle(0, 0, 0);
canvas.setGlobalCompositeOperation("copy");

但只要我拖动，它就会清除整个画布，即使我离以前的图纸很远。

我做错了什么？

我声称对vaadin一无所知，但一般来说，对于构图，您应该使用destination-out模式来清除顶部绘制的内容。

copy将如您所发现的那样只进行复制，因此在0字节被复制时，所有现有的内容都将被清除。

尝试：

canvas.setGlobalCompositeOperation("destination-out");
相关文章：