javascript - 删除画布中的前一个图像

Question

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

Answer 1

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

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

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

canvas.width = canvas.width

我通常使用该clearrect方法，因为它只是清除画布的表面，而另一种方法则重置各种其他事物，例如转换。另外我想我在某处读到该clearrect方法更快，但又一次取决于你想要什么。

顺便说一句，我经常发现我不想完全清除画布，但我想将其返回到以前的图像或背景图像。这通过使用另一个画布作为未显示在屏幕上的缓存来最有效地完成。然后，当您想将可见画布清除回以前的状态时，您可以使用drawImage. 这比重新计算一组背景或先前的状态要高效得多。