我应该使用多个画布(HTML 5)还是使用div来显示HUD数据？

Question

我正在制作一个游戏,其中健康栏(动画)和一些其他信息在视觉上代表一些图标显示玩家拥有的炸弹数量等.现在,这可以在画布上完成(通过制作另一个画布的信息它位于主画布上,或者可以使用许多div和跨度来完成.这是我第一次制作基于浏览器的游戏,所以如果有经验的人看到这个,请告诉我你的推荐.我想知道哪种方法会更快.

该游戏也将在移动设备上运行.谢谢!

Answer 1

没有直截了当的答案,我建议您使用不同的浏览器进行FPS测试,以确定您的用例.如果你不想这么深入,我建议你只需在canvas中绘制元素,如果你需要隐藏它们,那么从渲染循环中省略drawHUD()调用.

对于HTML HUD叠加,<canvas>应考虑以下因素

• <canvas>如果画布上有DOM元素,Web浏览器合成器是否可以正确加速硬件加速

• <canvas>由于处理DOM元素的继承复杂性,HTML/DOM操作总是比操作慢

• <canvas>像素空间留在里面<canvas>,如果你试图<canvas>在画布外部绘制元素,可能很难有像素完美的对齐

• HTML为canvas提供了比canvas drawString()更多的格式化选项 - 是必需的HTML格式

Answer 2

使用画布。如果需要，可以使用两个画布，一个叠加在另一个之上，但要使用画布。

接触 DOM 的速度很慢。由于移动 DOM 元素的大小非常慢，因此使文档重做其布局。由于画布顶部物理上有 DOM 项，因此处理取消（或不取消）更多事件可能会很痛苦，为什么要费心处理这个问题呢？

如果您的 HUD 不经常更新，那么最快的方法是在更改时将其绘制到内存中的画布，然后在更新框架时始终将该画布绘制到主画布。这样你的drawHud方法将看起来像这样：

function drawHUD() {
  // This is what gets called every frame
  // one call to drawImage = simple and fast
  ctx.drawImage(inMemoryCanvas, 0, 0);
}

当然，更新 HUD 信息如下：

function updateHUD() {
  // This is only called if information in the HUD changes
  inMemCtx.clearRect(0, 0, width, height);
  inMemCtx.fillRect(blah);
  inMemCtx.drawImage(SomeHudImage, x, y);
  var textToDraw = "Actually text is really slow and if there's" + 
                   "often repeated lines of text in your game you should be" +
                   "caching them to images instead";
  inMemCtx.fillText(textToDraw, x, y);
}

由于 HUD 通常包含文本，如果您使用任何文本，我真的强烈建议对其进行缓存。有关文本性能的更多信息请参见此处。