什么时候清除整个画布更快?

时间:2012-12-09 01:10:11

标签: javascript html5 html5-canvas

我正在构建一个基于画布的游戏,其中涉及相当多的精灵在运动时相互重叠。我的目标是移动设备,所以性能是一个问题。

在我的情况下,基本上有两种方法可以在画布上设置动画精灵:

  1. 删除至少有一个精灵移动/更改的每个帧上的整个画布,并重绘所有内容。从我看到的情况来看,这听起来很标准。
  2. 仅删除已移动/更改的精灵,并仅重绘已移动/更改的精灵以及与已移动/更改的精灵重叠的精灵。擦除那些已经移动/改变的精灵将从那些重叠的精灵中切出块,因此需要重新绘制重叠的精灵。
  3. 天真地说,听起来第二种选择会产生更好的表现。较少的抽奖操作等于机器必须做的工作量少,对吧?然而,第一个选项将涉及(可能)每帧一次clearRect()调用,第二个选项将涉及每帧的许多clearRect()调用(尽管每个调用一个明显更小的矩形。)而且更不用说确定的开销了。什么需要删除,什么重叠刚刚删除。

    所以,经过一番反思后,我不确定哪个更快。我确信在某些情况下第二种选择会更快,而且我认为有些情况下第一种选择会更快。

    现在有办法确定哪个更快的选项?或者我最好的办法是两种方式实施它并做一些基准测试?

1 个答案:

答案 0 :(得分:1)

当我意识到你可以将不同的绘制元素分离到彼此重叠的不同画布上时,我已经在较小的范围内处理了同样的问题并且有一个令人头疼的时刻!

一个背景画布,一个用于角色精灵,等等。

查看this question的答案,了解处理此绘图风格的完整框架。