HTML5キャンバスのパフォーマンス改善スキルで経験を共有します

コメント：この記事では、キャッシュテクノロジーを使用して事前描画を実装し、Canvsコンテンツの繰り返し描画を削減し、フローティングポイント座標を使用してHTML5キャンバスのパフォーマンスを改善する方法について説明します。興味のある友達はそれを参照して、それがすべての人に役立つことを願っています。

多くの場合、私たちはキャンバスを描画して更新し、これらのコンテンツについては常に変更されていないコンテンツを保持しています。

キャッシュは、すべての更新ではなく、事前に描画する必要があります。

コードは次のように直接描画されます。

context.font = "24px arial";

context.fillstyle = "blue";

context.filltext（ "<ec>を押してゲームを終了してください"、5,50）;

RequestAnimationFrame（render）;

キャッシュの使用事前塗装手法：

関数render（context）{

context.drawimage（mtext_canvas、0、0）;

RequestAnimationFrame（render）;

}

関数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（ "<ESC>を押してゲームを終了してください"、5,50）;

}

キャンバスキャッシュ描画テクノロジーを使用する場合、実際のキャンバスサイズよりも小さいキャンバスオブジェクトサイズをキャッシュすることを忘れないでください。直線を描く操作をまとめて、すぐに描画してみてください。悪いコードは次のとおりです。

for（var i = 0; i <points.length -1; i ++）{

var p1 =ポイント[i];

var p2 =ポイント[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 =ポイント[i];

var p2 =ポイント[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）;

}

描画状態の頻繁な切り替えは避けてください、そして、より良いパフォーマンス描画コードは次のとおりです。

// 平

context.fillstyle = "red";

for（var i = 0; i <5; i ++）{

Context.FillRect（0、（i * 2） * GAP、400、GAP）;

}

// 奇数

context.fillstyle = "blue";

for（var i = 0; i <5; i ++）{

Context.FillRect（0、（I * 2+1） * GAP、400、GAP）;

}

描画するときは、更新する必要がある領域のみを描画し、いつでも不必要な複製図面と余分なオーバーヘッドを避けてください。複雑なシーンの描画には、階層描画技術が使用されます。これは、前景とバックグラウンドの描画に分かれています。キャンバスレイヤーを定義します

HTMLは次のとおりです。

<canvas>

</canvas>

<canvas>

<span> </canvas>

</span>

必要でない場合は、影、ぼやけなどの効果を描画しないようにしてください。

フローティングポイント座標の使用は避けてください

グラフを描画するときは、フローティングポイント番号の代わりに整数を選択する必要があります。その理由は、Canvasがハーフピクセルの図面をサポートして、描画画像の拡散効果を達成するための小数点に基づいて補間アルゴリズムを実装するためです。必要でない場合は、フローティングポイント値を選択しないでください。

キャンバスの描画コンテンツをクリアします：

Context.ClearRect（0、0、canvas.width、canvas.height）

しかし、実際には、キャンバスにはハックのような方法もあります。

canvas.width = canvas.width;

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