この記事では、主に階層化されたキャンバスを使用してHTML5レンダリングを最適化するチュートリアルを紹介します。これは、公式のIBM Webサイト開発者の技術文書から来ています。それを必要とする友達は次の紹介を参照できます
通常、2Dゲームをプレイしたり、HTML5キャンバスをレンダリングするときは、複数のレイヤーを使用して合成シーンを構築するために最適化を実行する必要があります。 OpenGLやWebGLなどの低レベルのレンダリングでは、フレームごとにシーンをクリーニングおよび描画することでレンダリングが実行されます。レンダリングが実装された後、レンダリングの量を減らすためにゲームを最適化する必要があり、必要なコストは状況によって異なります。キャンバスはDOM要素であるため、複数のキャンバスを最適化方法として層化することができます。
一般的な略語
DOM：ドキュメントオブジェクトモデル
HTML：ハイパーテキストマークアップ言語（ハイパーテキストマークアップ言語）
この記事では、階層化キャンバスの合理性について説明します。層状のキャンバスを有効にするために、DOM設定を理解します。階層的最適化を使用するには、さまざまなプラクティスが必要です。この記事では、階層的アプローチを拡張する最適化戦略のためのいくつかの概念と技術についても説明します。
この記事で使用されている例のソースコードをダウンロードできます。
最適化戦略を選択します
最適な最適化戦略を選択するのは難しい場合があります。階層シナリオを選択するときは、シナリオの構成方法を検討する必要があります。大画面に固定されたオブジェクトをレンダリングするには、多くの場合、研究の優れた候補者であるいくつかのコンポーネントの再利用が必要です。多くの場合、視差やアニメーションエンティティなどの効果には、さまざまな画面スペースが必要です。最適な最適化戦略を調査する際には、これらの状況に注意を払うことが最善です。キャンバスの階層的最適化にはいくつかの異なる手法が必要ですが、これらの手法を正しく適用した後、パフォーマンスは大幅に改善されることがよくあります。
設定レイヤー
階層法を使用する場合、最初のステップは、DOMにキャンバスを設定することです。通常、これはシンプルで、キャンバス要素を定義してDOMに配置するだけですが、キャンバスレイヤーには追加のスタイルが必要になる場合があります。 CSSを使用する場合、Canvas階層を正常に実装するための2つの要件があります。
各キャンバス要素は、ビューポートの同じ位置に共存する必要があります。
各キャンバスは、別のキャンバスの下に見える必要があります。
図1は、レイヤー設定の背後にある一般的なオーバーラップの概念を示しています。
図1。レイヤーの例
レイヤーをセットアップする手順は次のとおりです。
階層をサポートするために、キャンバス要素の位置決めスタイルを追加します。
キャンバス要素をスタイルして、透明な背景を生成します。
キャンバスオーバーラップスタックを設定します
CSSでオーバーレイスタックを作成するには、少量のスタイルが必要になる場合があります。 HTMLとCSSを使用して重複する方法はたくさんあります。この記事の例では、キャンバスを含むために<div>タグを使用します。 <div>タグは、リスト1に示すように、子供のHTML5キャンバス要素にスタイルを適用する一意のIDを指定します。
リスト1。キャンバスポジショニングスタイル
CSSコードコピーコンテンツをクリップボードに