Salvarea și restaurarea stării canvas în JavaScript
Când se aplică metode precum fillRect() sau fillText(), poate fi necesar să se configureze în prealabil culoarea de umplere, fontul și alte proprietăți global pentru întregul obiect. Pentru a salva aceste setări, obiectul context oferă metoda save(). De fiecare dată când se apelează această metodă, setările curente ale canvas-ului sunt plasate într-un stivă și se salvează.
Pentru a recupera setările salvate ulterior, se utilizează metoda restore(). Această salvare și restaurare a setărilor poate fi utilă când trebuie să aplicăm setări globale comune unei părți din figuri și setări locale altor părți.
De exemplu, definim următoarea pagină:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FDC.COM</title>
</head>
<body>
<canvas id="canvas" width="400" height="250" style="background-color:#eee; border: 1px solid #ccc; margin:10px;"></canvas>
<script>
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
// Desenăm un dreptunghi cu setările implicite
// Culoarea de umplere implicită - negru
context.fillRect(0, 0, 150, 150);
// Salvăm starea curentă (o numim starea 1)
context.save();
// Schimbăm setările - stabilim culoarea de umplere - verde
context.fillStyle = "#7ed6df";
context.fillRect(15, 15, 120, 120); // desenăm un dreptunghi cu noile setări
// Salvăm starea curentă (o numim starea 2)
context.save();
// Schimbăm setările - stabilim culoarea de umplere - roșu
context.fillStyle = "#ff7979";
context.fillRect(30, 30, 90, 90); // Desenăm un dreptunghi cu noile setări
context.restore(); // Încărcăm starea precedentă (starea 2)
context.fillRect(45, 45, 60, 60); // Desenăm un dreptunghi cu setările anterioare (culoarea verde)
context.restore(); // Încărcăm starea precedentă (starea 1)
context.fillRect(60, 60, 30, 30); // Desenăm un dreptunghi cu setările anterioare (culoarea neagră)
</script>
</body>
</html>
Aici, inițial se creează un pătrat cu înălțimea și lățimea de 150 de pixeli folosind setările implicite (culoarea de umplere implicită este negru). Prin apelarea lui save(), salvăm aceste valori implicite în stivă. Apoi, culoarea de umplere este setată la "#7ed6df" (o nuanță de verde), și se creează un pătrat cu dimensiuni ușor mai mici (decalate pe orizontală și verticală). Apelând din nou save(), se vor salva și aceste setări în stivă. Ulterior, culoarea de fundal este setată la "#ff7979" (o nuanță de roșu), și din nou se desenează un pătrat mai mic.
Apoi, apelând restore(), se încarcă setările care au fost salvate ultima dată în stivă, adică cele în care culoarea de umplere a fost setată la verde (deci, pătratul desenat ulterior are această culoare). În mod similar, al doilea apel al funcției restore() va încărca setările inițiale, unde se aplică culoarea neagră.