我在为我绘制的对象实现“删除”功能时遇到问题。我像这样绘制对象:
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”会在我的浅蓝色背景中形成一个白洞，这是不好的。
那么我应该如何撤消我绘制的线/弧？
干杯
最佳答案
仅使用您的 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/
关于javascript - HTML5 Canvas 删除绘制的对象？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10875144/