HTML5 uključuje uzbudljivi element nazvan CANVAS. Ima puno upotreba, ali da biste ga koristili, morate naučiti neki JavaScript, HTML, i ponekad CSS.
To čini element CANVAS pomalo zastrašujućim za mnoge dizajnere, a zapravo će ga većina vjerojatno ignorirati element dok ne postoje pouzdani alati za stvaranje CANVAS animacija i igara bez znanja JavaScript.
Za što se koristi HTML5 platno
Element HTML5 CANVAS može se koristiti za puno stvari koje ste prethodno morali generirati ugrađenom aplikacijom poput Flash-a:
- Dinamična grafika
- Internetske i offline igre
- Animacije
- Interaktivni video i audio
Zapravo je glavni razlog zašto ljudi koriste element CANVAS zbog toga što je lako okrenuti običnu web stranicu u dinamičnu web aplikaciju, a zatim je pretvorite u mobilnu aplikaciju za upotrebu na pametnim telefonima i tablete.
Ako imamo Flash, zašto nam treba platno?
Prema HTML5 specifikacija, CANVAS element je: "... bitmap platno ovisno o razlučivosti, koje se može koristiti za prikazivanje grafikona, grafike igara, umjetnosti ili drugih vizualnih slika u letu."
Element CANVAS omogućuje vam crtanje grafikona, grafika, igara, umjetnina i ostalih vizualnih elemenata izravno na web stranici u stvarnom vremenu.
Možda mislite da to već možemo učiniti s Flashom, ali postoje dvije velike razlike između CANVAS-a i Flash-a:
- Element CANVAS ugrađen je točno u HTML. Skripte koje se na njemu nalaze nalaze se ili u HTML-u ili u povezanoj vanjskoj datoteci. To znači da je element CANVAS dio objektnog modela dokumenta (DOM).
- Flash je ugrađena vanjska datoteka. Za prikaz koristi ili EMBED ili OBJECT element i ne može izravno komunicirati s ostalim HTML elementima. Budući da je element CANVAS dio DOM-a, on može na više načina komunicirati s DOM-om.
- Na primjer, možete stvoriti animaciju koja se mijenja kada se stupi u interakciju s nekim drugim dijelom stranice - poput elementa obrasca koji se popunjava. Uz Flash, najviše što biste mogli učiniti bilo bi pokrenuti Flash film ili animacije, ali s CANVAS-om možete stvoriti mnogo različitih efekata, čak i dodajući tekst iz polja obrasca u animaciju.
- Element CANVAS izvorno podržavaju web preglednici. Da bi korisnici mogli stvarno koristiti Flash, u njihovom pregledniku mora biti instaliran dodatak. To je za većinu ljudi često gnjavaža zbog zastarjelih instalacija Flash-a ili činjenice da ih njihov operativni sustav jednostavno ne podržava.
- Nekada je svaki dodatak imao instaliran dodatak, ali to više nije slučaj, a mnogi čak i uklanjaju dodatak zbog poteškoća. Osim toga, nije dostupan ni na popularnom iOS platforma.
Platno je korisno čak i ako nikada niste planirali koristiti Flash
Jedan od glavnih razloga zašto je element CANVAS toliko zbunjujući jest taj što su se mnogi dizajneri navikli na potpuno statičnu mrežu. Slike su možda animirane, ali to je gotovo GIF, i naravno, možete ugraditi video u stranice, ali opet, to je statični video koji jednostavno sjedi na stranici i možda se pokreće ili zaustavlja zbog interakcije, ali to je sve.
Element CANVAS omogućuje vam dodavanje toliko više interaktivnosti na vaše web stranice jer sada grafičkim jezikom, slikama i tekstom možete dinamički kontrolirati skriptnim jezikom. Element CANVAS pomaže vam pretvoriti slike, fotografije, grafikone i grafikone u animirane elemente.
Kada razmotriti upotrebu elementa platna
Vaša publika trebala bi vam biti prva briga pri odluci hoćete li koristiti element CANVAS.
Ako vaša publika primarno koristi Windows XP i IE 6, 7 ili 8, tada će stvaranje dinamičke značajke platna biti besmisleno jer je ti preglednici ne podržavaju.
Ako gradite aplikaciju koja će se koristiti samo na Windows računalima, tada je Flash možda vaš najbolji izbor. Aplikacija koja će se koristiti na računalima sa sustavom Windows i Mac može imati koristi od aplikacije Silverlight.
Međutim, ako vašu aplikaciju trebate gledati na mobilnim uređajima (i Androidu i iOS-u), kao i modernim stolna računala (ažurirana na najnovije verzije preglednika), a zatim je korištenje elementa CANVAS dobar izbor.
Imajte na umu da vam korištenje ovog elementa omogućuje zamjenske opcije poput statičnih slika za starije preglednike koji ga ne podržavaju.
Međutim, ne preporučuje se korištenje HTML5 platna za sve. Trebao bi nikada koristite ga za stvari poput vašeg logotipa, naslova ili navigacije (iako bi bilo dobro koristiti ga za animiranje dijela bilo kojeg od njih).
Prema specifikaciji, trebali biste koristiti elemente koji su najprikladniji za ono što pokušavate izgraditi. Dakle, upotreba HEADER elementa zajedno sa slikama i tekstom poželjnija je od CANVAS elementa za vaše zaglavlje i logotip.
Također, ako stvarate web stranica ili u aplikaciji koja je namijenjena za upotrebu u neinteraktivnom mediju poput ispisa, trebali biste biti svjesni da se element CANVAS koji je dinamički ažuriran možda neće ispisati onako kako očekujete. Možda ćete dobiti ispis trenutnog sadržaja ili rezervnog sadržaja.