我最近开始学习如何使用HTML5画布,但我有很多问题,这些问题都与性能有关。我明白这一切都是相对的,取决于我的操作。但我希望能获得一些清晰的答案。
例如,我想要创建一个俯视玩家的游戏,所有元素都是2D的,地图可以在X和Y轴上滚动。
问题1:根据我的理解,在我的地图画布中没有移动的对象时,创建一个大的画布元素并进行一次绘制,然后使用JavaScript来滚动页面/移动画布,比创建一个大小与屏幕相同的画布元素、平移画布并在每次移动时重新绘制地图更有效率。
问题2:如果我使用上述方法来创建一个会滚动的大型画布来移动我的地图,那么在画布上进行简单的绘制和复杂的绘制之间是否会有很大的性能差异?例如:简单画布上有几行单色块,而复杂画布上有数千条线条、圆形、渐变、图案和细节。如果两个画布的宽度和高度相同,只要浏览器滚动它们就不会有太大的性能差异(不需要重新绘制)。
问题3:如何处理比画布对象更大的地图是更好的方法?我知道各种浏览器会限制画布的物理大小。将地图设计成几个大型画布块,当玩家靠近边缘时,将相邻块加载到全新的画布元素中是否更优?或者这样做会引起一些问题。如果我使用10,000像素乘以10,000像素大小的画布元素,并开始将它们放在一起,我是否只是自找麻烦?我最好还是设计成一个单一的画布,在玩家移动时重新绘制地图,并保持地图的复杂性不高,同时编写程序使其不考虑玩家不接近的部分。
我已经阅读了很多关于提高性能的技巧,比如分层画布和不要在浏览器刷新的频率之外重新绘制画布。但是我一直在寻找关于处理大型地图以及在地图上移动时性能优化的最佳实践方案的信息。
我非常想听听大家的想法。