一千萬個為什麽

搜索

HTML 5 Canvas性能

我剛剛開始使用畫布HTML5對象。為了性能測試,我做了一點乒乓遊戲

我可以使用任何性能改進嗎?

球似乎是藍色的,帶有一點紅色,但我聲明它應該是黃色的。我怎樣才能解決這個問題?

最佳答案

這應該有助於你的球顏色;

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(),後者是繪制填充的rectagle,fill()是填充pathes。

你可以通過一個簡單的乒乓遊戲來改進,但我會給出一些關於畫布性能的一般建議:

  • fillStyle/strokeStyle調用很昂貴,避免切換顏色。
  • 繪制復雜的形狀也很昂貴。你可以繪制然後使用像素api來渲染它們
  • 嘗試將渲染和處理分開,這將為您提供改進空間
  • 嘗試將純j用於高FPS遊戲/動畫

如上所述,非常一般的建議,可能不適合每個案例。

轉載註明原文: HTML 5 Canvas性能