4

キャンバスのHTML5オブジェクトをいじり始めたところです。パフォーマンステストのために、私は小さなピンポンゲームを作りました。

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

ボールは少し赤みを帯びた青のようですが、私の宣言では黄色になっているはずです。どうすればこれを修正できますか？

4

1 に答える 1

4

これは、ボールの色に役立ちます。

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（）はパスを塗りつぶします。

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

  • fillStyle /strokeStyleの呼び出しはコストがかかるため、色の切り替えは避けてください。
  • 複雑な形状を描くことも費用がかかります。次に描画し、ピクセルAPIを使用してレンダリングできます
  • レンダリングと処理を分離しておくようにしてください。これにより、改善の余地が生まれます。
  • 高FPSゲーム/アニメーションには純粋なjsを使用してみてください

述べたように、非常に一般的なアドバイスであり、すべての場合に適切であるとは限りません。

于 2010-04-18T13:12:58.323 に答える