prestazioni HTML 5 Canvas

Question

Sto appena iniziato a suonare in giro con il HTML5-oggetto tela. Per motivi di test di performance, ho fatto un po ' ping pong gioco .

Ci sono miglioramenti delle prestazioni potrei usare?

La palla sembra essere blu con un tocco di rosso, ma la mia dichiarazione che dovrebbe essere di colore giallo. Come posso risolvere questo problema?

Answer 1

Questo dovrebbe aiutare con il colore palla;

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;
};

riempimento () non si applica ai fillRect (), quest'ultimo sta attirando un rectagle riempito e riempimento () è di riempire pathes.

non c'è molto si può migliorare con un semplice gioco pong, ma darò alcuni consigli generali per prestazioni tela:

• chiamate fillStyle / strokeStyle sono costosi, colori commutazione evitare.
• disegnare forme complesse è costoso, troppo. è possibile disegnare e quindi utilizzare l'API di pixel di renderli
• cercare di mantenere il rendering e l'elaborazione separata, questo vi darà lo spazio per miglioramenti
• provare a utilizzare js puro per gli alti giochi FPS / animazioni

Come detto, consigli molto generali e potrebbe non essere appropriato per ogni caso.