在画布上绘制生成的背景时的一些建议

Some advice when drawing a generated background into a canvas

本文关键字：背景绘制更新时间：2023-09-26

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

当我想对tile结构进行活动更改时，问题出现了，在本例中，在画布上绘制以更改tile。每次我进行更改时，背景将再次保存为canvas.toDataURL()图像，因此更改将保存到背景中。但这在不断生成数据url时导致了巨大的性能下降(16fps)。

我的问题是:有没有更好的方法来捕获画布的内容来重用，而不会导致这样的帧丢失?另外，我不太了解canvas.toDataURL()是如何工作的，文件保存到服务器上了吗?使用此功能是否有带宽问题?

感谢@markE向我介绍了创建内存画布的概念。因为我是通过试错来学习的，所以我错过了这个方法是可以理解的。现在我的应用程序没有掉帧，响应速度更快了。

谢谢!