HTML5 Canvas

Pod transformacijama canvasa smatramo promjenu grida canvasa, odnosno promjenu koordinatnog sistema. To može biti translacija kord. sistema, rotacija, promjena skale, posmak, itd. Naravno ovo se odražava i na promjenu oblika geometrijkog lika koji će biti nacrtan unutar canvasa.
Važno je napomenuti da se promjena oblika odnosi na ona geom. tijela koja su nacrtana nakon upotrebe transformacijske metode (translate, rotate,...). Na geom. tijela nacrtana prije upotrebe transf. metode neće uticati.

Translacija

Translacija je pomak canvasa iz ishodišta 0,0 na koordinate x,y pri čemu se koristi metoda
translate(x,y).
Ova metoda djeluje tako da se translatira sve nacrtano nakon ove metode, a na ono ispred se ne odnosi. U donjem primjeru prvo je nacrtan crveni kvadrat sa početnim kordinatama 0,0. Zatim je pozvana translate(100,100) metoda koja translatira zeleni kvadrat nacrtan nakon poziva ove metode. Može se primjetiti kako je crveni kvadrat ostao na poziciji 0,0 dok je zeleni translatiran (jer je nacrtan nakon translate() metode)

Primjer - translacija kvadrata: vidi primjer » vidi code

Rotacija

oko ishodišta CANVASa

Za rotaciju canvasa (oko ishodišta canvasa) potrebna je metoda
rotate(rad).
Kut je u radijanima, a centar rotacije je ishodište CANVASa.

Isto kao kod translate ova metoda djeluje samo na crteže koji su nacrtani nakon ove metode

Primjer - rotacija pravokutnika: vidi primjer » vidi code

oko neke točke CANVASa

Za rotaciju canvasa oko određene točke (x,y) unutar canvasa koristit ćemo uzastopno tri metode:

Ako želimo da se prvokutnik zarotira oko svoje rubne točke upotrijebit će se prvo translate(100,50), zatim rotate(Math.PI/6) te nakon toga vratiti nazad sa translate(-100,-50): vidi primjer » vidi code

Scaling (promjena veličine)

Za promjenu veličine jedinice canvas grida koristi se metoda
scale(ratioX, ratioY)
gdje ratioX i ratioY mogu biti između 0.0 i beskonačno. Ako je manje od 1 onda je to smanjenje, a ako je veće od 1 onda je povećanje.
Slično kao kod translate i rotate ova metoda djeluje samo na crteže nacrtane nakon ove metode.

Primjer - povećanje i smanjenje: vidi primjer » vidi code

Iz gornjeg primjera može se primjetiti da zbog promjene mjerila canvas grida dolazi i do translatornog pomaka pravokutnika. Da bi se ovo izbjeglo potrebno je ishodište canvasa pomaknuti u centar pravokutnika sa translate(x,y), a nakon scale() metode ponovo vratiti ishodište nazada sa translate(-x,-y).

Primjer: vidi primjer » vidi code

Matrix Transformacija

Osim zasebnih metoda postoji jedinstvena metoda koja obavlja sve transformacije koordinatnog sistema unutar canvasa. To su metode:
setTransform(a,b,c,d,e,f)
i metoda
transform(a,b,c,d,e,f)
gdje je
a = scaleX , b = skewY , c = skewX , d = scaleY , e = translateX i f = translateY

Teorija objašnjenja spada u matematiku množenja matrica što ovdje neće biti objašnjeno. O matricama pogledati ovdje, a kako primjeniti na canvas pogledati na w3.org!

Ukoliko transform() primjenimo uzastopno više puta onda će svaki naredni transform početi gdje je prethodni završio. To međutim nije slučaj sa setTransform() jer on svaki puta resetira canvas grid na početno predefinirano stanje. Pogledati donja dva primjera!

Primjer za transform(): vidi primjer » vidi code

Primjer za setTransform(): vidi primjer » vidi code

- translacija primjenom transform() metode

Primjer : vidi primjer » vidi code

- scaling primjenom transform() metode

Primjer : vidi primjer » vidi code

- rotate primjenom transform() metode

gdje je a = kut rotacije u radijanima

Primjer : vidi primjer » vidi code

- skew (posmak) primjenom transform() metode

Sa skew se dobiva kosokutni koordinatni sustav, tj, kut između x i y ose nije pravi kut. Prva slika dolje prikazuje skew duž X ose, dok druga pokazuje skew duž Y ose.

Primjer - skew duž x-ose: vidi primjer » vidi code

Primjer - skew duž y-ose: vidi primjer » vidi code

Primjer - skew duž x i y ose: vidi primjer » vidi code

- složeniji primjeri

Kako zarotirati pravokutnik oko jedne njegove točke:
vidi primjer » vidi code

Što se dešava ako u jednoj transform() metodi napišemo svih 6 parametara:
vidi primjer » vidi code