Tipps zur Verbesserung der HTML5-Canvas-Leistung

1: Verwenden Sie die Caching-Technologie, um das Vorzeichnen zu implementieren und das wiederholte Zeichnen von Canvs-Inhalten zu reduzieren.

Wenn wir auf Canvas zeichnen und aktualisieren, behalten wir oft immer etwas unverändert bei Inhalte, für die

vorab in den Cache gezogen und nicht jedes Mal aktualisiert werden sollten.

Der Direktzeichnungscode lautet wie folgt:

context.font="24px Arial";
context.fillStyle="blue";
context.fillText("Please press <Esc> to exit game",5,50);
requestAnimationFrame(render);

Cache-Vorzeichnungstechnologie verwenden:

function render(context) {
	context.drawImage(mText_canvas, 0, 0);
	requestAnimationFrame(render);
}

function drawText(context) {
	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("Please press <Esc> to exit game",5,50);
}

Wenn Sie die Canvas-Cache-Zeichnungstechnologie verwenden, denken Sie unbedingt daran, die Canvas-Objektgröße kleiner als zwischenzuspeichern die tatsächliche Größe der Leinwand

. Versuchen Sie, die Vorgänge zum Zeichnen gerader Punkte zusammenzufassen und die Zeichnung auf einmal abzuschließen. Ein schlechter Code lautet wie folgt:

for (var i = 0; i < points.length - 1; i++) {
	  var p1 = points[i];
	  var p2 = points[i+1];
	  context.beginPath();
	  context.moveTo(p1.x, p1.y);
	  context.lineTo(p2.x, p2.y);
	  context.stroke();
}

Nachher Durch die Änderung wird die Leistung höher sein. Der Code lautet wie folgt:

context.beginPath();
for (var i = 0; i < points.length - 1; i++) {
  var p1 = points[i];
  var p2 = points[i+1];
  context.moveTo(p1.x, p1.y);
  context.lineTo(p2.x, p2.y);
}
context.stroke();

Unnötiges vermeiden LeinwandDer häufige Wechsel des Zeichenstilsist 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);
}

vermeidet häufiges Wechseln des Zeichenstatus und verbessert die Leistung:

// 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 Sie beim Zeichnen nur den Bereich, der aktualisiert werden muss, und vermeiden Sie unnötiges wiederholtes Zeichnen und zusätzlicher Mehraufwand jederzeit möglich.

Verwenden Sie die Layer-Drawing-Technologie für komplexe Szenenzeichnungen, die in Vordergrund und Hintergrund unterteilt sind. Der HTML-Code, der die Canvas-Ebene definiert, lautet wie folgt:

Wenn nicht erforderlich, vermeiden Sie die Verwendung von Zeicheneffekten wie Schatten, Unschärfe usw. .

<canvas id="bg" width="640" height="480" style="position: absolute; z-index: 0">
</canvas>
<canvas id="fg" width="640" height="480" style="position: absolute; z-index: 1"></canvas>

Vermeiden Sie die Verwendung von Gleitkommakoordinaten.

Beim Zeichnen von Grafiken sollten Länge und Koordinaten als ganze Zahlen statt als Gleitkommazahlen ausgewählt werden, da Canvas das Zeichnen mit halben Pixeln unterstützt

Der Interpolationsalgorithmus wird basierend auf den Dezimalstellen implementiert, um den Anti-Aliasing-Effekt des gezeichneten Bildes zu erzielen. Bitte wählen Sie keine Gleitkommawerte aus, wenn dies nicht erforderlich ist.

Zeichnungsinhalt auf der Leinwand löschen:

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

Aber tatsächlich gibt es eine ähnliche Methode in

Canvas

Hack Löschmethode: canvas.width = canvas.width;

Auch der Effekt des Löschens des Inhalts

auf der

Leinwand kann erzielt werden, wird jedoch von einigen Browsern möglicherweise nicht unterstützt.

Das Obige ist der Inhalt von Techniken zur Verbesserung der Leistung von HTML5 Canvas. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (). www.php.cn)!