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

Question

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

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

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

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/