HTML5游戏画布超大图？答案

【问题标题】：HTML5 game canvas very large map?HTML5游戏画布超大图？
【发布时间】：2013-08-30 03:52:13
【问题描述】：

我正在使用六边形瓷砖。我想制作非常非常大的地图，就像世界地图一样。

一个图块的宽度为 60 像素，高度为 40 像素。我的世界将有一千块瓷砖（从左到右）。

但这通常很难加载。我该怎么做才能使用非常大的地图？如何解决延迟问题？

【问题讨论】：

【解决方案1】：

不要“绘制”可见视口之外的图块。

【讨论】：

【解决方案2】：

我同意，不要在可视区域之外绘制图块。

您也可能会遇到问题，只需遍历大量数据并进行计算即可解决问题，您可以尝试将背景预渲染为 svg 甚至非矢量图像格式。

【讨论】：

【解决方案3】：

您在 1 行宽 6000+ 像素的地图中有 大量像素！

通常 .jpg 压缩图块是最有效的背景图像。

但在您的情况下，您可以尝试使用 SVG 作为地图背景而不是像素地图。

SVG 只记住地图的线条和曲线。

因此，您可以将 SVG 视为一幅图像，您不必“记住”行之间的空白像素。

这意味着客户端计算机要放入内存的完全渲染背景要少得多。

例如：

这个 SVG 世界地图的下载大小为 656k，但仍然只有大约 1mb 完全呈现在视图框中：

同一张地图的 .png 下载量为 160k，但在完全渲染到 6000+ 像素宽时为 15mb+。

SVG 也是“平铺”的理想选择。

它有一个内置的viewbox，可让您仅查看画布所代表的地图部分。

SVG 具有在不损失图像质量的情况下进行缩放的额外好处。（无像素化缩放）

【讨论】：