HTML5を使用したキャンバスでのユーザーインターフェイスの設計

Question

私はキャンバスに小さなゲームをデザインしましたが、インターフェースを追加したいと思います（サウンドトグルやその他の設定などのメニューオプションを備えた標準的なもの）。

Angry Birds html5（http://chrome.angrybirds.com）では、キャンバス以外のhtml要素がなく、インターフェイスを処理できません。

私はhtml5キャンバスでデザインされたゲーム全体、そしてdivsのようなhtml要素を使って完全にデザインされたCSSをスタイリングするのは悪い習慣でしょうか？

私は、代わりに何らかの形でユーザーが画面上でクリックする場所を判断するための何らかの衝突システムを書いていると思います。

誰かが私に正しい方向を向けることができ、私のキャンバスゲームにどの方法（純粋なキャンバスまたはhtml要素）が最適であるかを教えてくれることを願っていました。私の100％懸念しているのはパフォーマンスです。テストには数日かかるでしょう。 enter code here

Answer 1

ユーザーがキャンバスをクリックした場所を特定することはあまり難しくありません。私はライブラリgeeを使って、それは本当に簡単です。 APIのサンプルに従うだけで、あなたのgee canvasを作成し、マウス位置（g.mouseX、g.mouseY）とマウス操作（g.mousedrag、g.mousedown、g.mouseover、ecc ...）に常にアクセスできます。もちろん、アニメーションの自動リフレッシュ（g.draw）も処理されます。

あなたの質問について：UIをキャンバスにするか、CSSで外に出すかはあなた次第です。通常は、ユーザーインターフェイスのパフォーマンスを気にする必要はなく、コードを実装する方法によってパフォーマンスが異なります。悪い実装では、インターフェイスに使用しているテクノロジに関係なく、パフォーマンスの遅れが発生する可能性があります。