KONTAKT
izuzetan[at]gmail.com

Saving i restoring stanja

Da bi smo mogli kreirati složenije crteže moramo odredjena stanja (pozicije crteža) spremati (uslovno rečeno "memorisati") i po nekad obnavljati. U narednim primerima će biti sve jasnije. Funkcije za to su:

save( )
restore( )

Odredjena CANVAS stanja možemo po želji memorisati save( ) funkcijom, i takodje po želji možemo ih pozivati restore( ) funkcijom kako bi smo ih ponovo promenili, i opet prikazali. Tako možemo napraviti vrlo složene crteže sa malo pisanja. Crtanje stanja sastoji se od:

• Transformacija (tj. translacije, rotacije i skaliranje - vidi u nastavku)
• Vrednosti strokeStyle, fillStyle, globalAlpha, LineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation svojstva
• Trenutni clipping put, što ćemo videti u sledećem odeljku.

Evo jednog kraćeg primera koji demonstrira save() i restore() funkcije:

function crtaj() {
canvas = document.getElementById("kocke");
  if (canvas.getContext) {
    ctx = canvas.getContext("2d");
    ctx.fillRect(0,0,150,150);
        // crtanje pravougaonika
    ctx.save();
        // učitavanje pošetnog stanja crteža
    ctx.fillStyle = "#09F"
        // vršimo nove promene istog crteža, ali imajte
        // na umu da smo prethodno stanje zapamtili
    ctx.fillRect(15,15,120,120);
        // crtamo pravougaonik sa novim dimenzijama
    ctx.save();
        // pamtimo nove promene
    ctx.fillStyle = "#FFF"
        // vršimo nove promene
    ctx.globalAlpha = 0.5;
    ctx.fillRect(30,30,90,90);
        // Crtamo novi pravougaonik
    ctx.restore();
        // vraćamo predjašnje stanje
    ctx.fillRect(45,45,60,60);
        // pravougaonik sa obnovljenim postavkama prepravljamo
    ctx.restore();
        // vraćamo predjašnje originalno stanje
    ctx.fillRect(60,60,30,30);
        // pravougaonik sa obnovljenim originalnim
        //postavkama po drugi put prepravljamo
  }
}

Ovaj primer ilustriruje kako učitavanjem stanja možemo manjim pisanjem nacrtati veći broj pravougaonika.