HTML5 Canvas擦除绘制的对象？

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以在画布上绘制每个对象。

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

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

更多内容： 如何向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