Canvas speichern und wiederherstellen: ctx.save und ctx.restore

ctx.save speichert nicht den Canvas, nur den Zeichen-Kontext.

canvas.save speichert nicht den Inhalt des Canvas mit seinen aktuellen Formen und Farben, sondern die aktuellen Einstellungen der Zeichenwerkzeuge wie fill und stroke.

Dementsprechend holt canvas.restore die Einstellungen wieder zurück.

Jeder Context enthält einen Stack von Zeichenzuständen. Ein Zeichenzustand besteht aus:

Der aktuelle Pfad und die aktuelle Bitmap sind kein Bestandteil des Zeichenzustands. Ein Pfad kann nur durch beginPath() zurückgesetzt werden. Die aktuelle Bitmap ist eine Eigenschaft des Canvas und nicht der Kontext.

context.save()

Packt den aktuellen Zustand auf den Stack.

context.restore()

Entfernt den obersten Zustand vom Stack und stellt den Context auf diesen Zustand.

Transformationen des Context

Bei einer Transformation wird das gesamte Koordinatensystem des Context transformiert.

Canvas Kontext speichern und wiederherstellen

Nach der Transformation soll das Koordinatensystem wieder zurück in den normalen Zustand, bevor der nächste Schritt ausgeführt wird.

Würde der Weg zurück durch eine weitere Transformation durchgeführt, könnten kleine Fehler entstehen, die sich im Handumdrehen zu großen Abweichungen addieren.

Das ist es einfacher, die normalen Koordinaten am Anfang zu speichern und nach der Transformation zu restaurieren.

Der Kontext-Stapel

Die ersten drei Formen des Beispiels bauen ihren eigenen Context auf: Füllfarbe und Schatten. Ist das Rechteck festgelegt, wird sein Context als neuster Kontext oben auf dem Kontext-Stapel gespeichert, bevor die Anweisungen für ein neues Rechteck beginnen.

Nach dem dritten Rechteck wird der Kontext nicht gespeichert, sondern der Kontext bleibt für den grünen Kreis aktiv. ctx.restore holt dann wieder den Context des zweiten Elements (rosa Rechteck) für den rosa Kreis hervor, das nächste ctx.restore den Context des ersten Element (pink Rechteck).

Die gespeicherten Zustände verhalten sich wie die Scheiben im Spiel Türme von Hanoi: Jeder neue Kontext wird oben auf dem Hash abgelegt.

Canvas als Bild speichern

Der Canvas wird mit canvas.toDataURL () als Bild gespeichert.

document.querySelector("#toData").onclick = function () {
    var dataURL = canvas.toDataURL();
    document.querySelector("#canvasImg").src = dataURL;
}
ctx.save / ctx.restore ctx.save() ctx.restore() rotate stretch