大型HTML5画布滚动性能技巧

11

我最近开始学习如何使用HTML5画布,但我有很多问题,这些问题都与性能有关。我明白这一切都是相对的,取决于我的操作。但我希望能获得一些清晰的答案。

例如,我想要创建一个俯视玩家的游戏,所有元素都是2D的,地图可以在X和Y轴上滚动。

问题1:根据我的理解,在我的地图画布中没有移动的对象时,创建一个大的画布元素并进行一次绘制,然后使用JavaScript来滚动页面/移动画布,比创建一个大小与屏幕相同的画布元素、平移画布并在每次移动时重新绘制地图更有效率。

问题2:如果我使用上述方法来创建一个会滚动的大型画布来移动我的地图,那么在画布上进行简单的绘制和复杂的绘制之间是否会有很大的性能差异?例如:简单画布上有几行单色块,而复杂画布上有数千条线条、圆形、渐变、图案和细节。如果两个画布的宽度和高度相同,只要浏览器滚动它们就不会有太大的性能差异(不需要重新绘制)。

问题3:如何处理比画布对象更大的地图是更好的方法?我知道各种浏览器会限制画布的物理大小。将地图设计成几个大型画布块,当玩家靠近边缘时,将相邻块加载到全新的画布元素中是否更优?或者这样做会引起一些问题。如果我使用10,000像素乘以10,000像素大小的画布元素,并开始将它们放在一起,我是否只是自找麻烦?我最好还是设计成一个单一的画布,在玩家移动时重新绘制地图,并保持地图的复杂性不高,同时编写程序使其不考虑玩家不接近的部分。

我已经阅读了很多关于提高性能的技巧,比如分层画布和不要在浏览器刷新的频率之外重新绘制画布。但是我一直在寻找关于处理大型地图以及在地图上移动时性能优化的最佳实践方案的信息。

我非常想听听大家的想法。


(1) 超大画布比视口大小的画布使用更多资源--尽可能将画布大小保持接近视口大小。如果使用视口来平移超大画布,重绘比较昂贵。(2) 如果没有涉及到绘图命令,渲染简单和复杂内容之间几乎没有区别。(3) 10K x 10K 倍数个画布(!!!)。立即停止并重构您的代码以使用合理大小的画布。 - markE
10K乘以10K主要是一个插图。我更倾向于创建一个新的相邻画布,然后删除最后一个,这样一次只会有一个或两个。但是,是的,我开始意识到这不是最好的方法。 - tyler mackenzie
1个回答

7

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

问题2:没错,完全没有区别。浏览器只会在视口后面移动已经绘制的画布。

问题3:在谷歌地图上使用Chrome元素检查器进行试验。这是一个在小手机上运行的巨大地图的绝佳例子。您将看到它使用了一组图片网格(您可以使用画布)。您可以缓存视口外的这些块,以备用户返回。调整缓存大小以保持内存使用合理。


10
今天我发现了这个问题,看了答案,想知道为什么这个可怜的家伙从来没有得到点赞,试图给他一个赞,结果发现答案实际上是我的。糟糕!(注:LOL是英文笑话中常用的缩写,表示大笑或嘲笑声) - Hacky

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接