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