HTML 5キャンバスパフォーマンス

Question

Canvas HTML5-Objectで遊んだばかりです。パフォーマンステストのために、私は少し作りました ピンポンゲーム.

使用できるパフォーマンスの改善はありますか？

ボールは赤のタッチで青いように見えますが、私の宣言は黄色でなければなりません。どうすればこれを修正できますか？

Answer 1

これは、ボールの色に役立つはずです。

function drawBall (x, y, r) {
    ctx.beginPath();
    ctx.fillStyle = "yellow";
    ctx.arc(x, y, r, 0, Math.PI*2, false);
    ctx.closePath();
    ctx.fill(); //added
    fps++;
}

function drawP1 (h) {
    ctx.fillStyle = '#FF0000';
    ctx.fillRect(0, h, 20, 100);
    //ctx.fill(); // remove in P2 also
    fps++;
    return true;
};

fill（）はfillrect（）に適用されません。後者は塗りつぶされた長方形を描画し、fill（）はパスを埋めるためです。

シンプルなポンゲームで改善できることはあまりありませんが、キャンバスのパフォーマンスについて一般的なアドバイスをいくつか紹介します。

• 塗りつぶし/ストロークスタイルの呼び出しは高価です。色の切り替えは避けてください。
• 複雑な形状を描くことも高価です。その後、描画してピクセルAPIを使用してレンダリングできます
• レンダリングと処理を分離し続けるようにしてください、これにより改善のためのスペースが得られます
• ハイFPSゲーム/アニメーションに純粋なJSを使用してみてください

前述のように、非常に一般的なアドバイスであり、すべてのケースに適していない可能性があります。