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

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

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

解决方法

使用画布.如果需要,可以使用两个画布,一个覆盖另一个,但使用画布.

完全触摸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);
}

当然更新HUD信息就像：

function updateHUD() {
  // This is only called if information in the HUD changes
  inMemCtx.clearRect(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,y);
}

由于HUD通常包含文本,所以如果您使用任何文本,我确实强烈要求缓存它. More on text performance here.