大型 HTML5 Canvas 滚动性能提示

Question

我最近开始学习使用 HTML5 Canvas，我确实有很多问题。都与性能有关。我知道这一切对我正在做的事情都是非常主观的。但我只是希望获得一些清晰。

在使用玩家鸟瞰图创建游戏的示例中。所有 2d 的地图都可以在 X 和 Y 轴上滚动。

问题 1： 以我的理解，只要我的地图画布中没有移动的物体。像创建一个我绘制一次然后使用 JS 滚动页面/移动画布这样的大型画布元素会更有效。而不是创建一个与我的屏幕大小相同的画布，而是平移画布并在每次移动时重新绘制地图。

问题 2： 如果我使用上面的方法让一个大画布滚动来移动我的地图。在画布上简单绘图和复杂绘图之间会有很大的性能差异吗？示例：具有几行单色块的简单画布与具有数千条线条、圆圈、渐变、图案和细节的复杂画布相比。如果两个画布的宽度和高度相同，那么仅让浏览器滚动它们就不会产生巨大的性能差异吗？ （没有重绘）。

问题 3： 是否有首选方法来处理比画布对象更大的地图？我知道各种浏览器会限制画布的物理尺寸。在几个大画布块中设计地图是否更好。当玩家接近边缘时，将相邻块加载到全新的画布元素中。或者这会导致问题。如果我正在使用 10,000 x 10,000 像素的画布元素，并且我开始并排放置其中的几个，我只是在自找麻烦吗？我是否最好将其设计为在单个画布中运行，该画布仅在玩家移动时重新绘制地图并降低地图的复杂性。并对其进行编程，使其不会考虑地图中不靠近玩家的部分。

我已经阅读了很多关于提高性能的技巧，例如分层画布和不重绘画布超过浏览器刷新的次数。但我一直无法找到有关处理大型地图的良好做法以及在它们周围移动的性能的信息。

我真的很想听听大家的想法。

Answer 1

问题 1 实际上不是问题，但最好创建一个与屏幕大小相同的画布，平移画布并随着每次移动重新绘制部分地图。不要重绘整个地图，而是添加方法来重绘地图中比视口稍大的部分，可能会排除已经绘制的部分地图。否则您的浏览器可能会因内存压力而崩溃。

问题 2： 对。根本不会有任何区别。浏览器将简单地将已经绘制的画布移动到视口后面。

问题 3： 在谷歌地图上玩弄 Chrome 的元素检查器。这是在小型手机上运行的巨大地图的一个很好的例子。您将看到它使用图像网格（您可以使用画布）。如果用户返回，您可以将这些块缓存在视口之外。调整缓存大小以保持内存使用正常。