Techniken zur Leistungsverbesserung von HTML5 Canvas und Techniken zum Erfahrungsaustausch_html5-Tutorial

Verwenden Sie Caching-Technologie, um Vorzeichnungen zu implementieren, um das wiederholte Zeichnen von Canvs-Inhalten zu reduzieren.
Wenn wir auf Canvas zeichnen und aktualisieren, behalten wir oft immer einige unveränderte Inhalte bei, für die Inhalte
vorab erstellt werden sollten -gezeichnetes Caching statt jedes Mal aktualisieren.
Der Direktzeichnungscode lautet wie folgt:

Kopieren Sie den Code

Der Code lautet wie folgt:

context .font="24px Arial";
context.fillStyle="blue";
context.fillText("Bitte drücken Sie , um das Spiel zu verlassen",5,50);
requestAnimationFrame(render) ;

Cache-Pre-Drawing-Technologie verwenden:

Kopieren Sie den Code

Der Code lautet wie folgt:

function render(context) {
context.drawImage(mText_canvas, 0, 0);
requestAnimationFrame(render); }
function drawText(context) {
mText_canvas = document.createElement("canvas");
mText_canvas.height = 54;
var m_context = mText_canvas. getContext("2d");
m_context.font="24px Arial";
m_context.fillText("Bitte drücken Sie , um das Spiel zu verlassen",5 ,50);
}


Beachten Sie bei der Verwendung der Canvas-Cache-Zeichnungstechnologie unbedingt, dass die Größe des zwischengespeicherten Canvas-Objekts kleiner sein sollte als die tatsächliche Canvas-Größe. Versuchen Sie, die Vorgänge zum Zeichnen gerader Punkte zusammenzufassen und die Zeichnung auf einmal abzuschließen. Ein schlechter Code lautet wie folgt:

Code kopieren

Der Code lautet wie folgt:

für (var i = 0; i var p1 = Punkte[i ];

var p2 = points[i 1];
context.moveTo(p1.x, p1.y); p2.y);
context.Stroke();
}



Der geänderte Code mit höherer Leistung lautet wie folgt:

Code kopieren

Der Code lautet wie folgt: context.beginPath(); for (var i = 0; i var p1 = punkte[i]; .y);

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

context.Stroke();


Vermeiden Sie unnötiges häufiges Wechseln des Canvas-Zeichnungsstatus . Ein Beispiel für einen häufigen Wechsel des Zeichenstils ist wie folgt:





Code kopieren

Der Code lautet wie folgt:

var GAP = 10; for (var i=0; icontext.fillStyle = (i % 2 ? "blue" : "red"); context.fillRect(0, i * GAP, 400, GAP ; 🎜>

Der Code lautet wie folgt:

// even
context.fillStyle = "red";
for (var i = 0; i context.fillRect(0, (i*2) * GAP, 400, GAP); >// odd
context.fillStyle = "blue";
for ( var i = 0; i context.fillRect(0, (i*2 1) * GAP , 400, GAP);
}

zeichnen Beim Zeichnen wird nur der Bereich gezeichnet, der aktualisiert werden muss, und unnötiges wiederholtes Zeichnen und zusätzlicher Aufwand müssen jederzeit vermieden werden. Für das Rendern komplexer Szenen wird die Layer-Rendering-Technologie verwendet und Vordergrund und Hintergrund werden separat gezeichnet. Das

HTML, das die Canvas-Ebene definiert, lautet wie folgt:

Kopieren Sie den Code

Der Code lautet wie folgt:



">



Wenn es nicht notwendig ist, vermeiden Sie die Verwendung spezieller Zeichnungseffekte wie Schatten, Unschärfe usw.

Vermeiden Sie die Verwendung von Gleitkommakoordinaten
Beim Zeichnen von Grafiken sollten Länge und Koordinaten ganze Zahlen statt Gleitkommazahlen sein. Der Grund dafür ist, dass Canvas das Zeichnen mit halben Pixeln unterstützt und implementiert Der Interpolationsalgorithmus basiert auf Dezimalstellen. Um den Anti-Aliasing-Effekt gezeichneter Bilder zu erzielen, wählen Sie bitte keine Gleitkommawerte aus, es sei denn, dies ist erforderlich.

Zeichnungsinhalt auf Canvas löschen:
context.clearRect(0, 0, canvas.width,canvas.height)
Aber es gibt tatsächlich einen ähnlichen Hack in Canvas Die Löschmethode:
canvas.width = canvas.width;
kann auch den Effekt des Löschens des Inhalts auf der Leinwand erzielen, wird jedoch von einigen Browsern möglicherweise nicht unterstützt.