Teilen Sie Erfahrungen in HTML5 -Canvas -Leistungsverbesserungsfähigkeiten aus

Kommentar: In diesem Artikel wird erläutert, wie die Cache-Technologie zur Implementierung vor dem Zeichnen verwendet wird, die wiederholte Zeichnung von Canvs-Inhalten reduziert und die Verwendung schwimmender Punktkoordinaten zur Verbesserung der Leistung von HTML5-Leinwand vermeiden kann. Interessierte Freunde können sich darauf beziehen, in der Hoffnung, dass es für alle hilfreich sein wird.

Oft zeichnen und aktualisieren wir auf Leinwand und halten immer unveränderte Inhalte für diese Inhalte.

Der Cache sollte vorgewiesen sein, nicht jede Aktualisierung.

Der Code wird direkt wie folgt gezeichnet:

context.font = "24px arial";

context.fillStyle = "blau";

context.FillText ("Bitte drücken Sie <SEC>, um das Spiel zu beenden", 5,50);

RequestAnimationFrame (Render);

Mithilfe von Cache-Vor-Mischen-Techniken:

Funktionsrender (Kontext) {

context.drawimage (mtext_canvas, 0, 0);

RequestAnimationFrame (Render);

}

Funktion DrawText (Kontext) {

mtext_canvas = document.createelement ("canvas");

mtext_canvas.width = 450;

mtext_canvas.height = 54;

var m_context = mtext_canvas.getContext ("2d");

m_context.font = "24px arial";

m_context.fillStyle = "Blue";

m_context.fillText ("Bitte drücken Sie <SEC>, um das Spiel zu beenden", 5,50);

}

Denken Sie bei der Verwendung von Canvas -Cache -Zeichnungs -Technologie daran, die Größe des Canvas -Objekts weniger als die tatsächliche Leinwandgröße zu untersuchen. Versuchen Sie, die Operationen des Zusammenstellens gerader Linien zusammenzusetzen und sie sofort zu zeichnen. Ein schlechter Code ist wie folgt:

für (var i = 0; i <points.length - 1; i ++) {

var p1 = Punkte [i];

var p2 = Punkte [i+1];

context.beginPath ();

context.moveto (p1.x, p1.y);

context.lineto (p2.x, p2.y);

context.stroke ();

}

Der Code mit einer höheren Leistung nach der Änderung ist wie folgt:

context.beginPath ();

für (var i = 0; i <points.length - 1; i ++) {

var p1 = Punkte [i];

var p2 = Punkte [i+1];

context.moveto (p1.x, p1.y);

context.lineto (p2.x, p2.y);

}

context.stroke ();

Vermeiden Sie das häufige Umschalten unnötiger Zeichnungszustände von Leinwand. Ein Beispiel für häufiges Schalten des Zeichnungsstils ist wie folgt:

var gap = 10;

für (var i = 0; i <10; i ++) {

context.fillStyle = (i % 2? "Blue": "rot");

Context.FillRect (0, I * Gap, 400, Gap);

}

Vermeiden Sie das häufige Wechsel von Zeichnungszuständen, und der bessere Leistungszeichnungscode ist wie folgt:

// sogar

context.fillStyle = "rot";

für (var i = 0; i <5; i ++) {

context.FillRect (0, (i * 2) * GAP, 400, GAP);

}

// seltsam

context.fillStyle = "blau";

für (var i = 0; i <5; i ++) {

context.FillRect (0, (i * 2+1) * GAP, 400, GAP);

}

Zeichnen Sie beim Zeichnen nur die Bereiche, die aktualisiert werden müssen, und vermeiden Sie jederzeit unnötiges doppelte Zeichnung und zusätzliche Overhead. Für eine komplexe Szenenzeichnung wird hierarchische Zeichentechnologie verwendet, die in den Vordergrund und die Hintergrundzeichnung unterteilt ist. Definieren Sie die Leinwandschicht

Die HTML ist wie folgt:

<Canvas>

</canvas>

<Canvas>

<span> </canvas>

</Span>

Wenn nicht erforderlich, versuchen Sie, Effekte wie Schatten, Unschärfe usw. zu vermeiden, um zu vermeiden, dass Zeichnen von Schatten, Unschärfen usw. vermieden werden.

Vermeiden Sie die Verwendung von schwimmenden Punktkoordinaten

Beim Zeichnen eines Diagramms sollten Ganzzahlen anstelle von Schwimmpunktzahlen ausgewählt werden. Der Grund dafür ist, dass Leinwand die Halbpixelzeichnung unterstützt, um einen Interpolationsalgorithmus zu implementieren, der auf Dezimalstellen basiert, um die Anti-Aliasing-Wirkung von Zeichnenbildern zu erzielen. Wenn dies nicht erforderlich ist, wählen Sie bitte keine Floating-Punkt-Werte.

Löschen Sie den Zeichnungsinhalt auf Leinwand:

context.clearrect (0, 0, canvas.width, canvas.height)

Tatsächlich gibt es in Leinwand jedoch auch eine hackartige Methode:

canvas.width = canvas.width;

Es kann auch den Effekt des Löschens von Inhalten auf Leinwand erzielen, es wird jedoch möglicherweise nicht bei einigen Browsern unterstützt.