清除后的 HTML5 恢复画布答案

【问题标题】：HTML5 restore canvas after clearing清除后的 HTML5 恢复画布
【发布时间】：2011-12-29 04:02:51
【问题描述】：

我有一个函数可以将一组图像绘制到画布上，然后保存。

然后在命令行中我运行：

canvas.save();
canvas.clearRect(0,0,415,415);
canvas.restore();

我希望它能够恢复它，但它什么也没做。任何帮助，我在谷歌上找不到任何关于在这个系列中运行的信息，而且我过去曾遇到过几次这个问题。

【问题讨论】：

你可以查看这个[Updating Canvas content on onmouseover and onmouseout][1] [1]: stackoverflow.com/questions/11273252/…

标签： html save restore html5-canvas

【解决方案1】：

您可以使用 getImageData 和 putImageData 来保存和恢复画布内容。

tmp = context.getImageData(0,0,415,415);
context.clearRect(0,0,415,415);
context.putImageData(tmp,0,0);

【讨论】：

比绘制、清除和重绘的 CPU 效率要高得多。
这似乎比像其他答案那样使用隐藏画布要干净得多。

【解决方案2】：

您误解了save 的作用。它保存画布的状态，受rotate、translate、scale 等影响。它不保存画布的任何实际内容。如果您想保存画布上的实际内容，请尝试将其存储在隐藏的画布中。假设您已将隐藏的画布添加到 html 并获取其上下文对象 (canvas2)，则应保存以下内容：

canvas2.drawImage(canvas, 0, 0)

然后恢复它：

canvas.drawImage(canvas2, 0, 0)

【讨论】：