Der Canvas-Context – Zustand der Zeichnung
Jeder Context enthält einen Stack von Zeichenzuständen. Ein Zeichenzustand besteht aus:
- Der aktuellen Transformations-Matrix,
- der aktuellen Clipping-Region.
- den aktuellen Werten für die Attribute: strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign, textBaseline.
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.
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. Da 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;
document.querySelector("#canvasImg").width = 500;
document.querySelector("#canvasImg").height = 50;
}
Dem Benutzer die Bitmap des Canvas zum Download anzubieten ist nicht ganz so einfach wie es scheint.
document.querySelector("#simpleDownload").addEventListener("click", function () {
var image_data = canvas.toDataURL("image/png");
// Neues Fenster für die Bilddaten
window.open(image_data);
});
Eine solide Lösung für die ganz alten Browser wie IE11 sendet die Bilddaten (image_data) an ein PHP-Script auf dem Server.
Idee für PHP-Script: How to save an HTML5 Canvas as an image on a server?
