Javascript HTML5画布擦除绘制的对象？

我无法为我绘制的对象实现“擦除”功能。我画的对象是这样的：

function draw_obj1(context) {
    context.lineTo(...)
    context.arc(...)
    //etc
}

这些是在画布的图像背景上绘制的（通过context.createPattern、fillStyle=pattern等）

因此，假设上面的函数使用各种lineTo调用绘制出一个三角形。现在要“擦除”或“撤消”这幅画，我的一个计划是在上面重新绘制同一物体的“异或”版本，撤消它。我通过context.globalCompositeOperation执行此操作（请参阅：）

这几乎是可行的，除了最终的结果在我浅蓝色的背景下不是完全空白。它显示为浅灰色三角形，而不是原来的黑色线条三角形

编辑-忘了提及我尝试过的另一个想法。在我需要去的地方做“clearRect”会在我浅蓝色的背景上留下一个白色的洞，这是不好的

那么，我应该如何撤消绘制的直线/圆弧呢

干杯

你应该做一个“抽签队列”。也就是说，将画布上完成的操作序列放入数组中。这种方法的优点是，你的每一个动作都会在一个数组中被跟踪。不利的一面是整个画布必须重新绘制以适应变化

画布动画框架在大多数情况下都会执行这些操作

一个简单的表示如下所示：

var drawingQueue = [
    {
        shape : 'rectangle',
        fill : 'red'
    },
    {
        shape : 'circle',
        fill : 'blue'
    },
    {
        shape : 'arc',
        fill : 'green'
    }
];

drawingQueue

是命令的命令/属性数组，用于指示在画布中绘制的内容。在本例中，此队列将绘制一个红色矩形、蓝色圆圈和绿色圆弧

例如，如果我想删除圆，我只需将其从数组中删除，然后重新绘制队列中的所有内容-现在没有圆。假设我们做了一个撤销，我们将使用数组

pop（）

删除最后一项，然后重新绘制画布-现在没有弧

---

但是为了更快的开发，我建议改用框架。他们将为您的形状提供内部跟踪系统，以便在画布中轻松添加和删除“元素”。首选是KineticJS和FabricJS。

仅使用画布内容是不可能的。 Canvas元素的反应类似于真实的画布：由于绘制了对象，所以它们被合并并绑定到完整的图片

这是因为在大多数图形API中，画布只是一个字节数组。 计算机无法单独知道如何识别和区分构成当前帧的对象

最好的方法是实现类似“场景图”的东西，即图形树。 然后，您可以将对象附加到此图形树中，并构造自己的算法在画布上绘制每个对象

您可以有一个历史数据结构，允许撤消/重做从场景图中追加/删除对象，并在一个小的时间片（纳秒）内重新绘制每个对象

这是对你问题的整体看法。希望您知道如何以编程方式处理图形

更多信息请点击此处：

---

这里：

shot，看来我得在这里学习一种新的网络技术了。感谢您的回复这是2d图形编程中普遍存在的问题。这不是一个技术问题，更像是一个简单性问题：图形API为您提供了高级别的可能性，您可以决定如何使用它。2D图形需要快速，并且允许开发人员深入，我们可以有最佳的动画循环、响应和这类东西。

prev_comp = context.globalCompositeOperation
context.globalCompositeOperation = 'destination-out'
context.strokeStyle = "rgba(255, 255, 255, 1)"

/* Draw some "eraser" lines/shapes ..*/

context.globalCompositeOperation = prev_comp