Ovaj element ima koristi od drugih tehnologija
HTML5 sadrži uzbudljiv element naziva CANVAS. Ima puno koristi, ali kako bi ga koristili morate naučiti neke JavaScript, HTML, a ponekad i CSS.
To čini element CANVAS pomalo zastrašujućim za mnoge dizajnere, a zapravo će većina vjerojatno ignorirati element sve dok ne postoje pouzdani alati za stvaranje animacija i igara CANVAS-a bez poznavanja JavaScript-a.
Što se za HTML5 platnu koristi
Element HTML5 CANVAS može se upotrebljavati za mnoge stvari koje su prethodno trebale upotrijebiti ugrađenu aplikaciju kao što je Flash za generiranje:
- dinamička grafika
- online i offline igre
- animacije
- interaktivni video i audio
U stvari, glavni razlog zbog kojeg ljudi upotrebljavaju CANVAS element je zbog toga koliko je jednostavno pretvoriti običnu web stranicu u dinamičnu web aplikaciju, a zatim pretvoriti tu aplikaciju u mobilnu aplikaciju za upotrebu na pametnim telefonima i tabletima.
Ako imamo bljesak, zašto trebamo platnu?
Prema HTML5 specifikaciji, CANVAS element je:
"... bitmap platna ovisna o rezoluciji, koja se može koristiti za prikazivanje grafikona, grafičkih igara, umjetnosti ili drugih vizualnih slika."Element CANVAS omogućuje vam u stvarnom vremenu nacrt grafikona, grafike, igara, umjetnosti i drugih vizuala na web stranici.
Možda mislite da to već možemo učiniti Flashom, ali postoje dvije velike razlike između CANVAS i Flasha:
- CANVAS element ugrađen je izravno u HTML. Skripte koje se odnose na njega su ili u HTML-u ili u povezanoj vanjskoj datoteci. To znači da je element CANVAS dio modela objekta dokumenta ili DOM-a.
- Flash je ugrađena vanjska datoteka. Ona koristi element EMBED ili OBJECT za prikaz i ne može izravno komunicirati s drugim HTML elementima. Budući da je CANVAS element dio DOM-a, on može komunicirati s DOM-om na mnogo načina.
- Na primjer, možete izraditi animaciju koja se mijenja kada je u interakciji s nekim drugim dijelom stranice - kao što je ispunjen element obrasca. S Flashom najviše možete učiniti da pokrenete Flash film ili animaciju, ali s CANVAS možete stvoriti mnogo različitih efekata, čak i dodavanje teksta iz polja obrasca u animaciju.
- CANVAS element nativno podržava web preglednici. Kako bi korisnici mogli koristiti Flash, njihov preglednik mora imati ugrađen dodatak. To je često gnjavaža za većinu ljudi zbog zastarjelih instalacija Flasha ili činjenice da ih operacijski sustav jednostavno ne podržava.
- Bilo je to da svaki preglednik ima plugin instaliran, ali to više nije slučaj, a mnogi čak uklanjaju dodatak zbog poteškoća. Osim toga, to nije ni dostupno na popularnoj iOS platformi.
Platno je korisno čak i ako nikada ne planirate koristiti Flash
Jedan od glavnih razloga zašto je CANVAS element toliko zbunjujuća je činjenica da se mnogi dizajneri koristili za potpuno statički web. Slike mogu biti animirane, ali to je učinjeno s GIF-om, a naravno možete položiti videozapis na stranice, ali opet, to je statičan videozapis koji jednostavno sjedne na stranicu i možda se pokreće ili zaustavlja zbog interakcije, ali to je sve.
CANVAS element omogućuje vam da dodate mnogo više interaktivnosti na svoje web stranice, jer sada možete kontrolirati grafiku, slike i tekst dinamički skriptnim jezikom. CANVAS element vam pomaže pretvoriti slike, fotografije, grafikone i grafikone u animirane elemente.
Kada razmisliti o korištenju elementa platna
Vaša publika bi trebala biti vaš prvi razlog prilikom odlučivanja o upotrebi CANVAS elementa.
Ako vaša publika prvenstveno upotrebljava Windows XP i IE 6, 7 ili 8, stvaranje značajke dinamičkog platna bit će besmisleno jer ti preglednici to ne podržavaju.
Ako gradite program koji će se koristiti samo na Windows računalima, Flash bi mogao biti vaš najbolji kladiti se. Aplikacija koja će se koristiti na računalima sa sustavom Windows i Mac može imati koristi od aplikacije Silverlight.
Međutim, ako se vaša aplikacija mora pregledavati na mobilnim uređajima (Android i iOS), kao i suvremenim stolnim računalima (ažurirana je na najnovije verzije preglednika), tada je CANVAS element dobar izbor.
Imajte na umu da pomoću ovog elementa možete imati zamjenske opcije kao što su statičke slike za starije preglednike koji ga ne podržavaju.
Međutim, nije preporučljivo koristiti HTML5 platno za sve. Nikad ga ne biste smjeli upotrebljavati za stvari poput vašeg logotipa, naslova ili navigacije (iako je upotrebljavate za animiranje dijela bilo koje od njih bilo bi u redu).
Prema specifikaciji, trebali biste upotrijebiti elemente koji su najprikladniji za ono što pokušavate graditi. Zato korištenje elementa HEADER zajedno s slikama i tekstom je prednost za CANVAS element za zaglavlje i logotip.
Također, ako izrađujete web stranicu ili aplikaciju koja je namijenjena za upotrebu u neinteraktivnom mediju kao što je ispisivanje, trebate biti svjesni da se CANVAS element koji je dinamički ažuriran možda ne ispisuje prema očekivanjima. Možete dobiti ispis trenutnog sadržaja ili rezervnog sadržaja.