如何清除画布中的图像上的矩形

Question

我需要清除在画布中的图像上绘制一个矩形而不会损坏现有图像。我可以绘制小矩形点并清除它。但问题是，当我清除矩形时，它仍然是图像上的白色小补丁。

有人可以告诉我如何在不损坏现有图像的情况下清除图像上的矩形。

我使用了以下方法来清除矩形，但没有工作。

1）context.fillStyle ="white";

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

提前致谢！

Answer 1

Canvas无法正常工作。它是单层，默认情况下也是透明的。因此，考虑到这一点，您可以通过简单地为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的顶部图像来绘制/清除所需的任何内容。这是一种常见的做法，对于更复杂的动画，您最终会获得更好的性能。