如何提高 HTML Canvas 中的地图渲染性能？
How can I increase map rendering performance in HTML Canvas?
我们正在开发基于网络的游戏。该地图具有固定大小，并且是程序生成的。
目前，所有这些多边形都存储在一个数组中，并检查是否应该绘制它们。这需要大量的性能。哪个是大地图的最佳渲染/缓冲解决方案？
我尝试过的：
- 四叉树。问题：性能仍然没有那么好，因为多边形太多了。
- 将地图的各个部分绘制到屏幕外-canvases。测试 运行：http://norizon.ch/repo/buffered-map-rendering/ 问题：尝试缓冲那么多数据时浏览器崩溃，而且如此大的图像（可能是 2000x2000）在 canvas.[=23= 上似乎仍然表现不佳]
（为方便起见，发表评论作为答案）
一个想法可能是，当用户翻译地图时，重新使用仍可见的部分，并仅绘制不再正确的条纹。
我相信（你确认吗？）成本最高的操作是绘图，而不是找到要绘制哪个多边形。
如果是这样，您应该使用四叉树来查找条带内的多边形。请注意，给定 Javascript 的开销，包含给定 (x,y) 瓦片内的多边形的简单 2D 桶可能使用起来更快（if四叉树的成本太高了）。
现在我对你应该这样做的确切方法有疑问，恐怕你必须进行试验/基准测试，并且可能会选择一个喜欢的浏览器。
问题：
• 根据devices/Browsers，复制canvas 本身可能会很慢。 （实际上可能需要复制 2 份）
• 根据devices/Browsers，使用屏幕外canvas 可能会非常慢。 （离屏时可能不会使用硬件加速）。
如果您在地图上绘制东西，您可以在地图 canvas 上使用辅助 canvas，否则您将被迫使用屏幕外的canvas 您将在每一帧上复制。
我尝试了很多东西，结果证明这个解决方案最适合我们。
因为我们的地图具有固定大小，所以它是在服务器端计算的。
游戏开始时将加载一个包含所有必需图块的大图像集。对于图集中的每个图像，都会创建一个单独的 canvas。客户端将整个地图数据加载到一个二维数组中。这些值确定必须加载哪个图块。如果地图绘制在单独的 canvas 上可能会更好，这样只需要绘制条纹。但是性能真的很好，所以我们不会改变它。
三个结论：
- 图像速度很快。 GetImageData 不是！
- JavaScript对多线程的支持还不够好，所以我们不在游戏时计算客户端的地图。
- 四叉树很快。数组更快。
我们正在开发基于网络的游戏。该地图具有固定大小，并且是程序生成的。
目前，所有这些多边形都存储在一个数组中，并检查是否应该绘制它们。这需要大量的性能。哪个是大地图的最佳渲染/缓冲解决方案？ 我尝试过的：
- 四叉树。问题：性能仍然没有那么好，因为多边形太多了。
- 将地图的各个部分绘制到屏幕外-canvases。测试 运行：http://norizon.ch/repo/buffered-map-rendering/ 问题：尝试缓冲那么多数据时浏览器崩溃，而且如此大的图像（可能是 2000x2000）在 canvas.[=23= 上似乎仍然表现不佳]
（为方便起见，发表评论作为答案）
一个想法可能是，当用户翻译地图时，重新使用仍可见的部分，并仅绘制不再正确的条纹。
我相信（你确认吗？）成本最高的操作是绘图，而不是找到要绘制哪个多边形。
如果是这样，您应该使用四叉树来查找条带内的多边形。请注意，给定 Javascript 的开销，包含给定 (x,y) 瓦片内的多边形的简单 2D 桶可能使用起来更快（if四叉树的成本太高了）。
现在我对你应该这样做的确切方法有疑问，恐怕你必须进行试验/基准测试，并且可能会选择一个喜欢的浏览器。
问题：
• 根据devices/Browsers，复制canvas 本身可能会很慢。 （实际上可能需要复制 2 份）
• 根据devices/Browsers，使用屏幕外canvas 可能会非常慢。 （离屏时可能不会使用硬件加速）。
如果您在地图上绘制东西，您可以在地图 canvas 上使用辅助 canvas，否则您将被迫使用屏幕外的canvas 您将在每一帧上复制。
我尝试了很多东西，结果证明这个解决方案最适合我们。 因为我们的地图具有固定大小，所以它是在服务器端计算的。 游戏开始时将加载一个包含所有必需图块的大图像集。对于图集中的每个图像，都会创建一个单独的 canvas。客户端将整个地图数据加载到一个二维数组中。这些值确定必须加载哪个图块。如果地图绘制在单独的 canvas 上可能会更好，这样只需要绘制条纹。但是性能真的很好，所以我们不会改变它。
三个结论：
- 图像速度很快。 GetImageData 不是！
- JavaScript对多线程的支持还不够好，所以我们不在游戏时计算客户端的地图。
- 四叉树很快。数组更快。