如何清除畫布中的圖像上的矩形

Question

我需要清除在畫布中的圖像上繪制一個矩形，而不會損壞現有圖像。 我可以繪制小矩形點並清除它。 但問題是，當我清除矩形時，它仍然是圖像上的白色小補丁。

有人可以告訴我如何清除圖像上的矩形而不會損壞現有圖像。

我使用以下方法來清除矩形但不起作用。

1） context.fillStyle ="white";

2） context.clearRect(xCoordinate, yCoordinate, 10, 08);

提前致謝！

Answer 1

畫布不起作用。 它是單層，默認情況下也是透明的。 因此，考慮到這一點，您可以通過簡單地為canvas元素提供CSS背景來實現您想要的。 這樣，您在該背景之上繪制的任何內容都可以輕松刪除，背景將顯示出來。

#backed-canvas{
    background-image: url(http://www.placebear.com/300/200);
}

JSFiddle示例： https ：//jsfiddle.net/yLf5erut/

Answer 2

你可以做一件事。

在畫布上創建矩形時，只需獲取圖像數據：

var imgData = context.getImageData(xCoordinate, yCoordinate, 10, 8);

並繪制矩形。

清除矩形時，只需放置圖像數據，如下所示：

context.putImageData(imgData, xCoordinate, yCoordinate);

Answer 3

我建議使用2個畫布元素。 因此，您可以使用低zIndex在底部畫布上繪制原始圖像，並且可以使用具有較高zIndex的頂部圖像來繪制/清除所需的任何內容。 這是一種常見的做法，對於更復雜的動畫，您最終會獲得更好的性能。