HTML5 vključuje vznemirljiv element, imenovan CANVAS. Ima veliko uporab, toda če ga želite uporabiti, se morate naučiti nekaj JavaScript, HTMLin včasih CSS.
Zaradi tega je element CANVAS za mnoge oblikovalce nekoliko zastrašujoč, v resnici pa ga bo večina verjetno prezrla element, dokler ne obstajajo zanesljiva orodja za ustvarjanje CANVAS animacij in iger, ne da bi vedeli JavaScript.
Za kaj se uporablja platno HTML5
Element HTML5 CANVAS je mogoče uporabiti za veliko stvari, za katere ste prej morali ustvariti vdelano aplikacijo, kot je Flash:
- Dinamična grafika
- Spletne in offline igre
- Animacije
- Interaktivni video in avdio
Pravzaprav je glavni razlog, da ljudje uporabljajo element CANVAS, to, kako enostavno je obrniti navadno spletno stran v dinamično spletno aplikacijo in jo nato pretvorite v mobilno aplikacijo za uporabo na pametnih telefonih in tablete.
Če imamo Flash, zakaj potrebujemo platno?
Glede na Specifikacija HTML5, element CANVAS je: "... bitmap platno, odvisno od ločljivosti, ki se lahko uporablja za upodabljanje grafov, igralnih grafik, umetnosti ali drugih vizualnih slik v trenutku."
Element CANVAS omogoča risanje grafov, grafik, iger, umetnosti in drugih vizualnih elementov neposredno na spletni strani v realnem času.
Morda mislite, da to že lahko storimo s Flashom, vendar obstajata dve glavni razliki med CANVAS in Flash:
- Element CANVAS je vdelan v HTML. Skripti, ki temeljijo na njem, so v HTML-ju ali v povezani zunanji datoteki. To pomeni, da je element CANVAS del objektnega modela dokumenta (DOM).
- Flash je vdelana zunanja datoteka. Za prikaz uporablja bodisi element EMBED bodisi OBJECT in ne more neposredno komunicirati z drugimi elementi HTML. Ker je element CANVAS del DOM-a, lahko z njim na več načinov komunicira.
- Na primer, lahko ustvarite animacijo, ki se spremeni ob interakciji z drugim delom strani - na primer z izpolnjevanjem elementa obrazca. S Flashom bi lahko največ zagnali Flash film ali animacijo, vendar lahko s CANVAS ustvarite veliko različnih učinkov, celo dodate besedilo iz polja obrazca v animacijo.
- Element CANVAS izvorno podpirajo spletni brskalniki. Da lahko uporabniki dejansko uporabljajo Flash, mora imeti njihov brskalnik nameščen vtičnik. Za večino ljudi je to pogosto težava zaradi zastarelih namestitev Flash ali dejstva, da jih njihov operacijski sistem preprosto ne podpira.
- Včasih je bil vtičnik nameščen v vsakem brskalniku, vendar to ne drži več, mnogi pa ga zaradi težav celo odstranijo. Poleg tega na priljubljenem ni na voljo iOS platforma.
Canvas je uporaben, tudi če niste nikoli načrtovali uporabe Flash
Eden glavnih razlogov, zakaj je element CANVAS tako zmeden, je, da so se številni oblikovalci navadili na popolnoma statičen splet. Slike so morda animirane, vendar je s tem končano GIF, in seveda lahko video vdelate na strani, toda spet gre za statični video, ki preprosto sedi na strani in se morda začne ali ustavi zaradi interakcije, toda to je vse.
Element CANVAS vam omogoča, da svojim spletnim stranem dodate toliko več interaktivnosti, ker lahko zdaj s skriptnim jezikom dinamično nadzirate grafiko, slike in besedilo. Element CANVAS vam pomaga pretvoriti slike, fotografije, diagrame in grafe v animirane elemente.
Kdaj razmisliti o uporabi elementa platna
Pri odločanju, ali boste uporabili element CANVAS, morate biti najprej pozorni na občinstvo.
Če vaše občinstvo uporablja predvsem Windows XP in IE 6, 7 ali 8, potem bo ustvarjanje dinamične funkcije platna nesmiselno, saj je ti brskalniki ne podpirajo.
Če gradite aplikacijo, ki se bo uporabljala samo na računalnikih z operacijskim sistemom Windows, je Flash morda vaša najboljša izbira. Program Silverlight lahko koristi programu, ki se uporablja v računalnikih z operacijskim sistemom Windows in Mac.
Če pa je treba vašo aplikacijo gledati tako na mobilnih napravah (tako Android kot iOS), kot tudi na sodobnih namizni računalniki (posodobljeni na najnovejše različice brskalnika), potem je uporaba elementa CANVAS dobra izbira.
Upoštevajte, da vam uporaba tega elementa omogoča nadomestne možnosti, kot so statične slike za starejše brskalnike, ki tega ne podpirajo.
Vendar za vse ni priporočljivo uporabljati platna HTML5. Moral bi nikoli uporabite ga za stvari, kot so vaš logotip, naslov ali navigacija (čeprav bi bilo v redu z animiranjem dela katerega koli od njih).
V skladu s specifikacijo uporabite elemente, ki so najprimernejši za tisto, kar želite zgraditi. Uporaba elementa HEADER skupaj s slikami in besedilom je torej bolj priporočljiva kot element CANVAS za glavo in logotip.
Če ustvarjate tudi Spletna stran ali aplikacije, ki je namenjena za uporabo v neinteraktivnem mediju, kot je tiskanje, ne pozabite, da se element CANVAS, ki je bil dinamično posodobljen, morda ne bo natisnil, kot pričakujete. Morda boste dobili izpis trenutne ali nadomestne vsebine.