Učimo vas kako izraditi web stranicu i programirati
Početna » HTML » HTML5 Canvas
 

HTML5 Canvas

Kompozicija i clipping

Kompozicija

Kompozicija je postupak da se jedan geom. lik stavi ispred ili iza drugog. To se postiže svojstvom:
globalCompositeOperation = type
gdje type može biti:

source-over (default)
Ovo je predefinirana postavka i svaki novi lik se postavlja ispred svih starih likova.

Image:Canvas_composite_srcovr.png

destination-over
Novi likovi se postavljaju iza cijelog sadržaja na canvasu.

Image:Canvas_composite_destovr.png

source-in
Prikazuje novi lik na području preklapanja novog i starog lika. Sve ostalo je prozirno.

Image:Canvas_composite_srcin.png

destination-in
Prikazuje stari lik na preklapanju novog i starog lika.. Everything else is made transparent.

Image:Canvas_composite_destin.png

source-out
Prikazuje novi lik gdje nema preklapanja sa starim likom.

Image:Canvas_composite_srcout.png

destination-out
Prikazuje stari lik gdje nema preklapanja sa novim likom.

Image:Canvas_composite_destout.png

source-atop
Prikazuje novi lik iznad starog lika na području gdje je stari lik.

Image:Canvas_composite_srcatop.png

destination-atop
Prikazuje stari lik iznad novog lika na području gdje je novi lik.

Image:Canvas_composite_destatop.png

lighter
Na području preklapanja oba lika boja je definirana lighter (zbrajanje boja oba lika).

Image:Canvas_composite_lighten.png

darker

Na području preklapanja oba lika boja je definirana darker (oduzimanje boja oba lika).

Ovo više nije podržano.

Image:Canvas_composite_darken.png

xor
Područje preklapanja oba lika je prozirno.

Image:Canvas_composite_xor.png

copy
Prikazuje samo novi lik, a sve ostalo uklanja sa canvasa.

Image:Canvas_composite_copy.png




Clipping

Služi za mask tj. izradu okvira unutar kojeg će biti vidljiv canvas.
Potrebno je:
1. definirati nekakvu zakrivljenu liniju sa npr. arc()
2. umjesto da se upotrijebi closePath() treba upotrijebiti clip()
Time se stvara zatvorena linija unutar koje je vidljiv sadržaj canvasa, a izvan nije vidljivo.

Primjer: vidi primjer » vidi code




| Uvjeti Korištenja | Zaštita Privatnosti | Kontakt |