HTML5 Canvas のパフォーマンスを向上させるためのヒント

1: キャッシュテクノロジーを使用して、事前描画を実装し、Canvs コンテンツの繰り返し描画を減らします

Canvas 上で描画および更新する場合、多くの場合、これらのコンテンツについては、変更されていないコンテンツが常に保持されます

。 -drawn 毎回更新する代わりにキャッシュします。

直接描画コードは次のとおりです:

context.font="24px Arial";
context.fillStyle="blue";
context.fillText("Please press <Esc> to exit game",5,50);
requestAnimationFrame(render);

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

function render(context) {
	context.drawImage(mText_canvas, 0, 0);
	requestAnimationFrame(render);
}

function drawText(context) {
	mText_canvas = document.createElement("canvas");
	mText_canvas.width = 450;
	mText_canvas.height = 54;
	var m_context = mText_canvas.getContext("2d");
	m_context.font="24px Arial";
	m_context.fillStyle="blue";
	m_context.fillText("Please press <Esc> to exit game",5,50);
}

Canvasキャッシュ描画テクノロジを使用する場合は、必ずCanvasをキャッシュすることを忘れないでください。 実際より小さいオブジェクトサイズ キャンバス

のサイズ。直線の点を描画する操作をまとめて、一度に描画を完了させてみてください。 悪いコードは次のとおりです。

for (var i = 0; i < points.length - 1; i++) {
	  var p1 = points[i];
	  var p2 = points[i+1];
	  context.beginPath();
	  context.moveTo(p1.x, p1.y);
	  context.lineTo(p2.x, p2.y);
	  context.stroke();
}

Canvasの描画状態の頻繁な切り替えを避ける 描画

style

の頻繁な切り替えの例は次のとおりです。

context.beginPath();
for (var i = 0; i < points.length - 1; i++) {
  var p1 = points[i];
  var p2 = points[i+1];
  context.moveTo(p1.x, p1.y);
  context.lineTo(p2.x, p2.y);
}
context.stroke();

描画状態の頻繁な切り替えを避けます。パフォーマンスが向上するコードは次のとおりです:

var GAP = 10;
for(var i=0; i<10; i++) {
	context.fillStyle = (i % 2 ? "blue" : "red");
	context.fillRect(0, i * GAP, 400, GAP);
}

描画するときは、更新する必要がある領域のみを描画し、不必要な繰り返し描画や追加のオーバーヘッドを常に回避します。

前景と背景に分割された複雑なシーンの描画には、レイヤー描画テクノロジーを使用します。 Canvas レイヤーを定義する

HTML は次のとおりです:

// even
context.fillStyle = "red";
for (var i = 0; i < 5; i++) {
context.fillRect(0, (i*2) * GAP, 400, GAP);
}
			
// odd
context.fillStyle = "blue";
for (var i = 0; i < 5; i++) {
context.fillRect(0, (i*2+1) * GAP, 400, GAP);
}

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

浮動小数点座標の使用は避けてください。

グラフィックを描画するとき、長さと座標は浮動小数点数ではなく整数として選択する必要があります。その理由は、Canvas がハーフピクセル描画をサポートしているためです

補間アルゴリズムは小数点以下の桁に基づいて実装されます。描画画像のアンチエイリアス効果を実現する必要がない場合は、浮動小数点値を選択しないでください。

Canvas上の描画内容をクリアします:

context.clearRect(0, 0, Canvas.width,canvas.height)

しかし実際にはCanva

hack

に似たクリア方法もあります:

canvas.width = Canvas.width;もcanvas

のコンテンツをクリアする効果を実現できますが、一部のブラウザでは異なります。サポートされない場合があります。

上記は、HTML5 Canvas のパフォーマンスを向上させるためのヒントです。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。