Stato Canvas HTML5

Quando disegnamo grafici sul canvas, spesso dobbiamo cambiare lo stato del contesto 2D tramite save() e restore(). Ad esempio, quando disegni una linea o un rettangolo, hai bisogno di uno strokeStyle, e quando disegni la prossima linea o il prossimo rettangolo, hai bisogno di un altro strokeStyle. O diversi colori di riempimento, angoli di rotazione, ecc.

Quando si disegna sul canvas HTML5 utilizzando il contesto 2D, il contesto 2D è in qualche stato. Puoi impostare questo stato utilizzando le proprietà del contesto 2D (ad esempio fillStyle e strokeStyle). Tutte queste operazioni sono chiamate stato del contesto 2D.
Di solito, quando disegni sul canvas, devi cambiare lo stato del contesto 2d durante il processo di disegno. Ad esempio, strokeStyle per una linea o un rettangolo può aver bisogno di uno, mentre strokeStyle per altre linee o rettangoli può aver bisogno di un altro. O altri cambiamenti, o altri.
Poiché è molto complicato impostare uno stato completo prima di disegnare ogni forma, puoi spingere lo stato nello stack di stati. Poi puoi tirare fuori uno stato più vecchio da questo stack di stati. Questo è un metodo rapido per ripristinare uno stato più vecchio dopo aver cambiato temporaneamente uno stato.

Esempio di stato del canvas HTML5

Il metodo per spingere e tirare fuori lo stato dello stato di disegno è il seguente:

context.save(); // Prende uno stato e lo mette nello stack di stati.
context.restore(); // Toglie lo stato più recente dello stack e lo imposta nel contesto 2d.

Dopo aver salvato lo stato nello stack, puoi spingere più stati nello stack e poi riprenderli. Ecco un esempio di codice:

<canvas id="ex1" width="500" height="100" style="border: 1px solid #cccccc;">HTML5 Canvas non supportato</canvas>
<script>
var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");
context.fillStyle = "#66ff66";
context.strokeStyle = "#990000";
context.lineWidth = 5;
context.fillRect(5, 5, 50, 50);
context.strokeRect(5, 5, 50, 50);
context.save();
context.fillStyle = "#6666ff";
context.fillRect(65, 5, 50, 50);
context.strokeRect(65, 5, 50, 50);
context.save();
context.strokeStyle = "#000099";
context.fillRect(125, 5, 50, 50);
context.strokeRect(125, 5, 50, 50);
context.restore();
context.fillRect(185, 5, 50, 50);
context.strokeRect(185, 5, 50, 50);
context.restore();
context.fillRect(245, 5, 50, 50);
context.strokeRect(245, 5, 50, 50);
</script>

Questo è il risultato del codice sopra menzionato quando si disegna sul tavolo:

L'uso dello stack di stato

Se si modifica il modello di composizione del tavolo o le impostazioni di trasformazione e si desidera tornare alle impostazioni precedenti prima di apportare le modifiche, lo stack di stato è molto utile. Salvando e ripristinando il modello di composizione o le impostazioni di trasformazione, si può garantire che venga ripristinato correttamente. Altrimenti, tornare alle impostazioni esatte precedenti potrebbe essere difficile.

Quali sono lo stato del contesto 2D?

Tutte le proprietà del contesto 2D sono parte della conservazione e del recupero dello stato. Tuttavia, ciò non si applica a ciò che viene disegnato sul tavolo. Questo significa che, nel recupero dello stato, non verrà ripristinato l'area di disegno stessa. Verranno ripristinate solo le impostazioni del contesto 2D (valori delle proprietà). Queste impostazioni includono:

• fillStyle

• font

• globalAlpha

• globalCompositionOperation

• lineCap

• lineJoin

• lineWidth

• miterLimit

• shadowBlur

• shadowColor

• shadowOffsetX

• shadowOffsetY

• strokeStyle

• strokeStyle

• textAlign

• textBaseline
  

• Regione di tagliatura

• Matrice di trasformazione (attraverso context.rotate() + rotazione + traslazione context.setTransform())

Questa lista non è esaustiva. Con lo sviluppo dello standard, più attributi potrebbero diventare parte dello stato del contesto 2D.