HTML5 Canvas のパフォーマンス向上テクニックと経験の共有_html5 チュートリアル テクニック

キャッシュ テクノロジーを使用して事前描画を実装し、Canvs コンテンツの繰り返し描画を削減します
Canvs 上で描画および更新する場合、多くの場合、変更されていないコンテンツが常に保持されますが、そのコンテンツ
は事前に配置する必要があります。 -drawn 毎回更新する代わりにキャッシュします。
直接描画コードは次のとおりです:

コードをコピーします

コードは次のとおりです:

context .font="24px Arial";
context.fillStyle="blue";
context.fillText("ゲームを終了するには を押してください",5,50);
requestAnimationFrame(render) ;

キャッシュ事前描画テクノロジーを使用します:

コードをコピーします

コードは次のとおりです。

function render(context) {
context.drawImage(mText_canvas, 0, 0);
requestAnimationFrame(render);
関数drawText(context) {
mText_canvas = document.createElement("canvas");
mText_canvas.height = 54;
var m_context = mText_canvas. getContext("2d");
m_context. font="24px Arial";
m_context.fillStyle="blue";
m_context.fillText("ゲームを終了するには を押してください) ,50);
}


Canvas キャッシュ描画テクノロジを使用する場合は、キャッシュされた Canvas オブジェクトのサイズが実際の Canvas サイズより小さくなければならないことに注意してください。直線の点を描画する操作をまとめて、一度に描画を完了しようとします。 悪いコードは次のとおりです。

コードをコピー コードは次のとおりです:

for (var i = 0; i var p1 = Points[i ];
var p2 = ポイント[i 1];
context.beginPath();
context.lineTo(p2.x, p2.y);
context.ストローク();
}



よりパフォーマンスの高い変更されたコードは次のとおりです:

コードをコピーします

コードは次のとおりです。

context.beginPath(); = 0; i var p1 = ポイント[i]

context.moveTo(p1.x, p1) .y);
context.lineTo( p2.x, p2.y);


キャンバスの描画状態の頻繁な切り替えを回避します。描画スタイルを頻繁に切り替える例は次のとおりです:

コードをコピー


コードは次のとおりです:

var GAP = 10; for (var i=0; icontext.fillStyle = (i % 2 ? "blue" : "red"); context.fillRect(0, i * GAP, 400, GAP ; 🎜>

コードは次のとおりです:

//
context.fillStyle = "red";
for (var i = 0; i context.fillRect(0, (i*2) * GAP, 400, GAP); >// 奇数
context.fillStyle = "blue";

for ( var i = 0; i context.fillRect(0, (i*2 1) * GAP 、400、GAP);
}

描画時には、更新が必要な領域のみが描画され、不必要な繰り返し描画や追加のオーバーヘッドは常に回避されなければなりません。複雑なシーンのレンダリングには、レイヤード レンダリング テクノロジが使用され、前景と背景が別々に描画されます。 Canvas レイヤーを定義する HTML は次のとおりです。

コードをコピーします


コードは次のとおりです。

必要がない場合は、影やぼかしなどの描画特殊効果の使用は避けてください。

浮動小数点座標の使用を避ける
グラフィックを描画する場合、長さと座標は浮動小数点数ではなく整数である必要があります。その理由は、Canvas がハーフピクセル描画をサポートしており、実装されるためです。小数点以下の桁に基づく補間アルゴリズムにより、描画されたイメージのアンチエイリアス効果を実現するため、必要な場合を除き、浮動小数点値を選択しないでください。

Canvas 上の描画コンテンツをクリアします:
context.clearRect(0, 0, Canvas.width,canvas.height)
しかし、実際には Canvas にも同様のハックがあります。クリア メソッド:
canvas.width = Canvas.width;
もキャンバス上のコンテンツをクリアする効果を実現できますが、一部のブラウザではサポートされていない場合があります。