Dokumentation (canvas.quaese.de)

Canvas-Zustand - restore()

restore nimmt den obersten (letzten) Eintrag auf dem Stack und setzt den Zustand wie im restore-Objekt beschrieben zurück. Falls kein save-Zustand gefunden wird, muss die Methode nichts tun.

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 - restore()

Beispiel

Erläuterung

Anzeige