Techniken zur Leistungsverbesserung von HTML5 Canvas und Techniken zum Erfahrungsaustausch

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

WBOY

Freigeben： 2016-05-16 15:49:11

Original

1615 Leute haben es durchsucht

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 < Punkte.Länge - 1; 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 < punkte.länge - 1 ; 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; i<10; i ) { context.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 < 5; i ) {
context.fillRect(0, (i*2) * GAP, 400, GAP); >// odd
context.fillStyle = "blue";
for ( var i = 0; i < 5; 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: