HTML 5 Canvasのパフォーマンス向上テクニック

一:キャッシュ技術を用いて事前描画を実現し、Canvsの重複描画を減らす
多くの場合、Canvasで描画と更新を行い、常に一定の内容を保持しています.
リフレッシュするたびにキャッシュを描画するのではなく、キャッシュを事前に描画する必要があります.
ダイレクトペイントコードは次のとおりです.

context.font="24px Arial"; context.fillStyle="blue"; context.fillText("Please press  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  to exit game",5,50); }

Canvasキャッシュペイント技術を使用する場合は、キャッシュ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(); }

修正後のパフォーマンスの高いコードは次のとおりです.

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();

不要な
Canvas
頻繁に描画状態を切り替え、頻繁に描画状態を切り替える
style
の例は次のとおりです.

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

頻繁に描画状態を切り替えないでください.よりパフォーマンスの良い描画コードは次のとおりです.

// 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レイヤの定義
HTMLは以下の通りです.

必要がない場合は、シャドウ、ぼかしなどのペイントエフェクトを使用することをできるだけ避けます.
浮動小数点座標は使用しないでください.
図形を描画する場合、長さと座標は浮動小数点数ではなく整数を選択する必要があります.なぜなら、Canvasは半画素描画をサポートしているからです.
補間アルゴリズムは、小数点補間アルゴリズムに基づいて画像を描画するアンチエイリアシング効果を実現します.必要でない場合は、浮動小数点数値を選択しないでください.
Canvasの描画内容をクリアします.
context.clearRect(0, 0, canvas.width,canvas.height)
しかし、Canvasにはhackのようなクリア方法があります.
canvas.width = canvas.width;
また、canvas上のコンテンツを空にする効果もありますが、一部のブラウザではサポートされていない場合があります.