删除画布中的上一个图像

Question

我有一个画布，我通过单击按钮绘制图片，然后我想通过单击另一个按钮绘制另一个不同的图像。 问题是如何删除画布的上一个图像并加载新图像？ 有什么例子吗？

Answer 1

清除画布的一种方法是在整个画布上绘制一个矩形，以删除之前的内容。

context.clearRect (0, 0, width, height);

另一种方法是重置画布本身的宽度。

canvas.width = canvas.width

我通常使用clearrect方法，因为它只是清除画布的表面，而另一种方法会重置各种其他的东西，比如转换。另外我想我在某个地方读到clearrect方法更快，但又取决于你想要的东西。

作为一个侧面点，我经常发现我不想完全清除画布，但我想将它返回到之前的图像或背景图像。通过使用另一个画布作为未在屏幕上显示的缓存，可以最有效地完成此操作。然后，当您想要将可见画布清除回以前的状态时，您可以使用drawImage从缓存中绘制图像。这比重新计算设置的背景或之前的状态要有效得多。