HTML5 游戏（画布）- UI 技术？

我正在使用 PhoneGap 为移动设备（Android / iPhone / WebOS）构建 JavaScript / HTML5 游戏（使用 Canvas）。我目前正在尝试设计如何构建 UI 和游戏板以及它们如何交互，但我不确定最好的解决方案是什么。这是我能想到的——

1. 使用诸如drawImage和fillText之类的东西将UI直接构建到画布中
2. 使用常规 DOM 对象在画布外部构建 UI 部分，然后当 UI 元素需要与游戏板画布重叠时将 div 浮动在画布上。

是否还有其他我没有想到的可能的技术可以用来构建游戏 UI？另外，其中哪一个被认为是“标准”方式（我知道 HTML5 游戏不是很流行，所以可能还没有“标准”方式）？最后，您会推荐/使用哪种方式？

提前谢谢了！

EDIT

我已将这个问题移至 gamedev.stackoverflow.com。您可以在这里找到新问题：https://gamedev.stackexchange.com/questions/7090/html5-game-canvas-ui-techniques/7115#7115

你可以用一百万种方式做到这一点。然而，您感觉最舒服，您的工程师也感觉最自信。

如果您正在寻找灵感或代码示例，这是我的一种方法。我有一个函数可以重复绘制菜单，直到按下按钮为止。按下按钮时，游戏将加载，旧的菜单单击事件侦听器将被删除，并添加新的游戏单击事件侦听器。我还结束了菜单的旧绘制循环并开始新的游戏绘制循环。以下是一些精选的片段，可让您了解其完成方式：

Game.prototype.loadMenu = function() {
  var game = this;
  var can = this.canvas;

  // now we can use the mouse for the menu
  can.addEventListener('click', game.menuClickEvent, false);
  can.addEventListener('touchstart', game.menuClickEvent, false);

  // draw menu
  this.loop = setInterval(function() { game.drawMenu() }, 30);
};

Game.prototype.drawMenu = function() {
  // ... draw the menu
}

Game.prototype.loadLevel = function(levelstring) {
  // unload menu
  var can = this.canvas;
  var game = this;
  can.removeEventListener('click', game.menuClickEvent, false);
  can.removeEventListener('touchstart', game.menuClickEvent, false);

  if (this.loop) clearInterval(this.loop);

  // ... other level init stuff


  // now we can press keys for the game
  //can.addEventListener('click', game.gameClickEvent, false);
  can.addEventListener('touchstart', game.gameClickEvent, false);
  can.addEventListener('keydown', game.gameKeyDownEvent, false);

  this.loop = setInterval(function() { game.tick() }, 30);
}

// called from tick()
Game.prototype.draw = function(advanceFrame) {
  // ...
}

这样我就能够将游戏绘图和游戏事件与菜单绘图和菜单事件分开。如果我想让它们看起来真正漂亮的话，它还给了我在菜单中使用游戏/动画元素的余地。

（我也在双胞胎游戏开发讨论中发布了这个）