javascript - HTML5 Canvas 删除绘制的对象？

Question

我在为我绘制的对象实现“删除”功能时遇到问题。我像这样绘制对象:

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

这些是在我为 Canvas 设置的图像背景之上绘制的(通过 context.createPattern、fillStyle = pattern 等)。

假设上面的函数使用各种 lineTo 调用绘制出一个三 Angular 形。现在要“删除”或“撤消”此图，我的一个计划是在其上重新绘制同一对象的“异或”版本，以撤消它。我通过 context.globalCompositeOperation 执行此操作(参见:https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html)。

这几乎可以工作，除了最终结果在我的浅蓝色背景下不是完全空白。它是一个浅灰色的三 Angular 形，而不是原来的黑色三 Angular 形。

编辑 - 忘记提及我尝试过的另一个想法。在我需要消失的区域上执行“clearRect”会在我的浅蓝色背景中形成一个白洞，这是不好的。

那么我应该如何撤消我绘制的线/弧？

干杯

Answer 1

仅使用您的 Canvas 内容是不可能的。Canvas 元素的 react 就像一个真正的 Canvas :因为绘制了东西，所以它们被合并并绑定(bind)到完整的图片。

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

做到这一点的最好方法是实现类似于“场景图”的图树。然后，您可以将对象附加到此图树并构建自己的算法以在 Canvas 上绘制每个对象。

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

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

更多信息:How to add undo-functionality to HTML5 Canvas?

这里:http://www.abidibo.net/blog/2011/10/12/development-undo-and-redo-functionality-canvas/