HTML 5 Canvas Leistung

Question

Ich habe gerade angefangen auf der Leinwand HTML5-Objekt herum spielen. Aus Gründen der Performance-Tests, habe ich gemacht ein wenig Ping-Pong-Spiel .

Gibt es Performance-Verbesserungen, die ich verwenden könnte?

scheint der Ball mit einem Hauch von rot, blau zu sein, aber meine Erklärung soll es gelb sein. Wie kann ich dieses Problem beheben?

Answer 1

Dies sollte man mit dem Ball Farbe helfen;

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 () gilt nicht für fillRect (), letzteres ist ein gefülltes Rectagle und fill-Zeichnung () ist pathes zu füllen.

Es gibt nicht viel können Sie mit einem einfachen Pong-Spiel verbessern, aber ich werde einige allgemeine Ratschläge für die Leinwand Leistung geben:

• fillStyle / stroke Anrufe sind teuer, vermeiden Schalt Farben.
• Zeichnen komplexer Formen ist teuer. Sie können dann verwenden, um das Pixel api zeichnen sie
zu machen
• versuchen, Rendering und Verarbeitung getrennt zu halten, dies wird Ihnen Raum für Verbesserungen
• versuchen reine js für hohe FPS Spiele / Animationen
zu verwenden

Wie gesagt, sehr allgemeine Ratschläge und möglicherweise nicht für jeden Fall geeignet sein.