将生成的背景绘制到画布中时的一些建议

Question

我有一个正在使用HTML5画布的项目。 我想尝试在基于图块的网格中生成随机区域，使用context.drawImage()将每个图块以象限的方式绘制到屏幕上，您可以想象40x22的网格相当重。 为了解决这个问题，我抓起画布，并使用canvas.toDataURL()将其另存为图像，然后在每个渲染循环上绘制该图像。

当我想对图块结构进行主动更改时会出现问题，在这种情况下，请在画布上绘图以更改图块。 每次进行更改时，背景都会使用canvas.toDataURL()再次另存为图像，以便将更改保存到背景中。 但这会导致性能大幅下降（16fps），同时不断生成数据URL。

我的问题是：是否有更好的方法来捕获画布的内容以进行重用，而不会造成这种帧丢失？ 另外，我对canvas.toDataURL()工作方式不太了解，文件是否保存到服务器？ 使用此功能是否存在带宽问题？

Answer 1

感谢@markE向我介绍了创建内存画布的概念。 由于我是通过反复试验来学习的，因此我错过了这种方法是可以理解的。 现在，我的应用程序没有帧丢失，并且响应速度更快。

谢谢！