我最近开始学习使用HTML5 Canvas，我真的收到了很多问题。一切都与表现有关。我明白，这一切对我所做的事情来说都是非常主观的。但我只是希望获得一些清晰度。
在使用玩家的鸟瞰图创建游戏的示例中。所有2d都有一个在X轴和Y轴上滚动的地图。
问题1：根据我的理解，只要我的地图画布中没有移动物体。这样做的效率更高，比如创建一个我绘制一次的大画布元素，然后使用JS滚动页面/移动画布。而不是创建一个与我的屏幕大小相同的画布，翻译画布并用每次移动重绘地图。
问题2：如果我使用上面的方法来设置一个大型画布来滚动我的地图。画布上的简单绘图和复杂的绘图之间会有很大的性能差异吗？示例：简单画布，其中包含几行单色块，而复杂画布则包含数千个线条，圆圈，渐变，图案和细节。如果这两幅画布的宽度和高度相同，那么只要浏览器滚动它们就不会有巨大的性能差异吗？ （没有重绘）。
问题3：是否有一种首选方法来处理比画布对象大的地图？我知道各种浏览器会限制画布的物理尺寸。在几个大的画布块中设计地图是否更好？当玩家靠近边缘时，将相邻的块加载到全新的画布元素中。或者这会导致问题。如果我使用的是像10,000px到10,000px的画布元素并且我开始并排放置其中的几个，我只是在寻找麻烦？我最好将其设计为在单个画布中运行，只需在播放器移动时重绘地图并保持地图的复杂性。并对其进行编程，使其不会考虑地图上与播放器不相近的部分。
我已经阅读了很多关于增加性能的技巧，比如分层画布而不是重新绘制画布而不是浏览器刷新。但是，我一直在寻找有关处理大型地图和围绕它们移动的良好做法的信息。
我真的很想听听每个人的想法。
答案 0 :(得分：7)
问题1 实际上并不是一个问题，但最好创建一个与屏幕大小相同的画布，翻译画布并使用每个动作重绘地图的PART。不要重绘整个地图，而是添加方法来重绘比视口稍大的地图的一部分，可能会排除已绘制的地图的一部分。否则您的浏览器可能会因内存压力而崩溃
问题2：对。完全没有区别。浏览器只是将已绘制的画布移动到视口后面。
问题3：在Google地图上使用Chrome的元素检查器。这是一个在小巧的手机上运行的巨大地图的一个很好的例子。您将看到它使用图像网格（您可以使用画布）。如果用户返回，您可以在视口外缓存这些块。使用缓存大小来保持内存使用的合理性。