キャッシュ テクノロジーを使用して事前描画を実装し、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.ストローク();
}
よりパフォーマンスの高い変更されたコードは次のとおりです: