Dokumentation (canvas.quaese.de)

Canvas-Zustand - save()

save speichert den aktuellen Zustand der Zeichnung im Canvas auf dem Zeichnungsstack.

Der aktuelle Zustand entspricht normalerweise einem Schnappschuss, der alle Änderungen enthält, die bisher gemacht wurden. Im einzelnen werden folgende Eigenschaften auf dem Stack gesichert, wenn die Methode save aufgerufen wird.

Transformationen wie z.B. Verschiebung, Rotation oder Skalierung
Werte der Attribute strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation-Eigenschaften
Der aktuelle Arbeitspfad, der im nächsten Ausschnitt zu sehen sein wird

Beispiel

function drawIt(){
  var objCanvas = document.getElementById("canvas_id");
  // Falls das Objekt unterstützt wird
  if(objCanvas.getContext){
    // Kontext
    var objContext = objCanvas.getContext('2d');

    // Zeichnet Rechteck mit Defaultfarbe (schwarz)
    objContext.fillRect(0, 0, 80, 80);
    // Default speichern
    objContext.save();
    // Rotes Rechteck zeichnen
    objContext.fillStyle = "#f00";
    objContext.fillRect(20, 20, 80, 80);
    // Defaultzustand wiederherstellen
    objContext.restore();
    objContext.fillRect(40, 40, 80, 80);
  }else{
    // Sonstiger Code
  }
}

Erläuterung

Im ersten Schritt wird ein Rechteck mit Defaultfüllung (schwarz) gezeichnet. Danach wird der aktuelle Zustand mit save auf dem Stack gespeichert. Im Anschluss wird die Füllfarbe geändert und ein rotes Rechteck gezeichnet. Nachdem mit restore der Ausgangszustand wiederhergestellt wurde, wird wiederholt ein Rechteck mit schwarzer Füllung in den Kontext gezeichnet.

Canvas-Zustand - save()

Beispiel

Erläuterung

Anzeige