我有一个项目,我正在使用HTML5画布。我想尝试在基于图块的网格中生成一个随机区域,每个图块使用context.drawImage()
在象限中绘制到屏幕上,您可以想象它是40x22网格的负载很重。为了解决这个问题,我抓住画布并使用canvas.toDataURL()
将其保存为图像,并在每个渲染循环中绘制该图像。
当我想对图块结构进行主动更改时会出现问题,在这种情况下,在画布上绘制以更改图块。每次我进行更改时,背景将再次使用canvas.toDataURL()
保存为图像,以便将更改保存到背景中。但这会导致大量性能下降(16fps),同时不断生成数据URL。
我的问题是:是否有更好的方法来捕获画布的内容以便重复使用而不会造成这样的帧丢失?另外,我不太了解canvas.toDataURL()
如何工作,文件是否保存到服务器?使用此功能是否存在带宽问题?
答案 0 :(得分:0)
感谢@markE向我介绍了创建内存画布的概念。由于我通过反复试验学习,我错过了这种方法是可以理解的。现在我的应用程序没有帧丢失,而且响应速度更快。
谢谢!