多个画布元素如何影响性能?

时间:2017-10-09 17:00:16

标签: javascript canvas html5-canvas

我正试图在画布上制作一个简单的游戏(从上面看)。请告诉我,哪个更快:

1)在一个<canvas>上绘制所有内容并计算需要重绘的区域。

2)在不同的<canvas>元素上绘制场景的某些部分,并在必要时仅更新每个部分。在它的变体中,我也可以使用部分重绘。

例如,我可以在一个元素上绘制地图,在第二个元素上绘制敌人,在第三个元素上绘制光标等。移动敌人时,我只能重绘第二个画布。

请尽可能详细地解释哪个选项更好以及为什么。你能否请一本可以加深我对这个问题知识的书籍?对于初学者。

2 个答案:

答案 0 :(得分:0)

大多数帆布游戏都会使用您正在描述的一种分层。最远的前层将是HUD,可以是单独的画布或HTML元素,只有在发生某些事情时才会改变,例如有人升级其播放器。之后,这取决于他们如何绘制画布。最简单的方法是简单地绘制地图的各个部分,并在屏幕上显示障碍物。

答案 1 :(得分:-1)

使用一个画布,相信我。如果你有一个精灵除了坐在那里什么都不做,它仍然每秒被抽取60次,所以如果它正在移动或没有变化没有区别,如果它在屏幕上存在则无论变化如何都会被绘制。