如何在 Canvas 中清除图像上的矩形

Question

我需要在不损坏现有图像的情况下清除 Canvas 中图像上绘制的矩形。我可以绘制小矩形点并将其清除。但问题是，当我清除矩形时，它仍然是图像上的白色小块。

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

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

1) context.fillStyle ="white";

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

提前致谢！

Answer 1

你可以做一件事。

在 canvas 上创建矩形时，只需获取如下图像数据：

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

并绘制矩形。

清除矩形时，只需像这样放回图像数据：

context.putImageData(imgData, xCoordinate, yCoordinate);

Answer 2

Canvas 这样不行。它是单层，默认情况下也是透明的。因此，考虑到这一点，您可以通过简单地为 canvas 元素提供 CSS 背景来实现您想要的效果。这样，您在该背景上绘制的任何内容都可以轻松移除，并且背景会显示出来。

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

Answer 3

我建议逐个使用 2 canvas 个元素。 因此，您可以将原始图像绘制在底部 canvas 且 zIndex 较低的图像上，而顶部具有较高 zIndex 的图像可用于绘制/清除任何需要的图像。这是一种常见的做法，对于更复杂的动画，您最终会获得更好的性能。

How to clear rectangle on Image in Canvas