用<canvas>方法处理大型“地图”

Question

我正在寻找一个具有自上而下视图的基于图块的javascript游戏。想一想：Sim City Classic。

我想知道对于比用户的视口大的地图，正确的方法是什么。我应该为整个地图创建一个大画布，让用户使用浏览器滚动，还是应该将画布设置为浏览器的大小，并手动实现滚动。

在这两种情况下，我都可以看到可能存在性能因素。大地图是一个可以很慢的大画布，对于小地图，我需要手动滚动（并在滚动过程中重绘一次？）

Answer 1

地图的最佳方法是保留比显示屏略大的屏幕外画布。将地图渲染到该地图上并将该画布渲染到显示画布上。虽然没有移动，但您不需要更新地图，当只有小像素移动时，您只需要在移动方向上重新渲染新内容。这是通过复制已经渲染的东西并在相反的移动方向上移动它然后在行进方向上沿着两个边缘渲染新的东西来完成的。如果放大，您只需缩放背景地图并重新渲染它，而不是一次性渲染。同样缩小。只需渲染边缘，然后重新渲染部分地图。

查看谷歌地图。他们就是这样做的。当然，您的映射图像不必等待它们来自服务器，因此当地图等待内容时，用户将看不到空白区域。

此方法是处理大型常规和不规则平铺地图的最佳方法。

如果地图是动画的，那么你只需要强制它并重新渲染每个动画帧的地图，但仍然使用离屏画布。将地图动画速率降低到帧速率的一半可能是值得的。这样你就可以交织动画，将动画的一半传播到每个奇数帧，将另一半传播到偶数。