Question

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

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

这些画面超出了我对画布的图像背景（通过context.createPattern，fillStyle = pattern等）。

所以说上面的函数使用各种lineTo调用描绘出一个三角形。现在要“擦除”或“撤消”这个绘图，我的一个计划是重新绘制同一个对象的“xor”版本，以撤消它。我是通过context.globalCompositeOperation来完成的（参见：https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html）。

这几乎可以工作，除了最后的结果在我的浅蓝色背景下并非完全空白。它呈浅灰色三角形，与原始的黑色三角形相对。

编辑 - 忘了提到我试过的另一个想法。在我需要的区域做'clearRect'会在我浅蓝色的背景中形成一个白洞，这是不好的。

那么我应该如何去除我画出的线条/弧线呢？

干杯

Answer 1

仅使用Canvas内容无法做到这一点。 Canvas元素就像真正的画布一样反应：因为事物是绘制的，所以它们被合并并绑定到整个画面。

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

执行此操作的最佳方法是实现类似“场景图”，图树的内容。然后，您可以将对象附加到此图树，并构建您自己的algorythm，以便在画布上绘制每个对象。

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

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

更多信息，请点击此处：How to add undo-functionality to HTML5 Canvas?

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

Answer 2

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

Canvas动画框架大部分时间都会这样做。

一个简单的表示是这样的：

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

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

比如说我想删除圆圈，我只是将它从数组中删除并重新绘制队列中的所有内容 - 现在没有圆圈。假设我们进行撤消操作，我们将使用数组pop()删除最后一项，然后重绘画布 - 现在没有弧。

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

Answer 3

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

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

context.globalCompositeOperation = prev_comp

HTML5 Canvas擦除绘制的对象？

3 个答案: