HTML5 obsahuje vzrušujúci prvok s názvom CANVAS. Má veľa použití, ale aby ste ho mohli používať, musíte sa naučiť nejaký JavaScript, HTML, a niekedy CSS.
To robí prvok CANVAS pre mnohých dizajnérov trochu skľučujúcim a v skutočnosti ho väčšina bude pravdepodobne ignorovať element, kým nebudú k dispozícii spoľahlivé nástroje na vytváranie animácií a hier CANVAS bez toho, aby o tom vedeli JavaScript.
Na čo sa používa plátno HTML5
Element HTML5 CANVAS možno použiť na veľa vecí, ktoré ste predtým museli na vygenerovanie použiť zabudovanú aplikáciu ako Flash:
- Dynamická grafika
- Online a offline hry
- Animácie
- Interaktívne video a zvuk
Hlavným dôvodom, prečo ľudia používajú prvok CANVAS, je v skutočnosti to, aké ľahké je obrátiť sa na obyčajnú webovú stránku do dynamickej webovej aplikácie a potom ju previesť na mobilnú aplikáciu na použitie v smartfónoch a zariadeniach tablety.
Ak máme Flash, prečo potrebujeme plátno?
Podľa Špecifikácia HTML5, prvkom CANVAS je: „... bitmapové plátno závislé od rozlíšenia, ktoré sa dá použiť na vykreslenie grafov, grafík hier, umenia alebo iných vizuálnych obrázkov za behu.“
Element CANVAS umožňuje kresliť grafy, grafiku, hry, umenie a ďalšie vizuálne prvky priamo na webovú stránku v reálnom čase.
Možno si myslíte, že to už s programom Flash dokážeme, ale medzi programami CANVAS a Flash sú dva hlavné rozdiely:
- Prvok CANVAS je vložený priamo do HTML. Skripty, ktoré sa na ňu kreslia, sú buď v kóde HTML, alebo v prepojenom externom súbore. To znamená, že prvok CANVAS je súčasťou objektového modelu dokumentu (DOM).
- Flash je vložený externý súbor. Na zobrazovanie používa prvok EMBED alebo OBJECT a nemôže priamo interagovať s ostatnými prvkami HTML. Pretože prvok CANVAS je súčasťou DOM, môže s DOM interagovať mnohými spôsobmi.
- Môžete napríklad vytvoriť animáciu, ktorá sa zmení, keď dôjde k interakcii s nejakou inou časťou stránky - napríklad s vyplňovaným prvkom formulára. S programom Flash by ste mohli najviac začať Flash film alebo animácia, ale s programom CANVAS môžete vytvoriť veľa rôznych efektov, dokonca aj pridať text z poľa formulára do animácie.
- Prvok CANVAS je natívne podporovaný webovými prehľadávačmi. Aby mohli používatelia skutočne používať program Flash, musí mať ich prehliadač nainštalovaný doplnok. To je pre väčšinu ľudí často problémom kvôli zastaraným inštaláciám Flash alebo skutočnosti, že ich operačný systém jednoducho nepodporuje.
- Bývalo to tak, že každý prehliadač mal nainštalovaný doplnok, ale už to tak nie je, a mnohí tento doplnok kvôli problémom dokonca odstraňujú. Navyše nie je k dispozícii ani u populárnych platforma iOS.
Plátno je užitočné, aj keď ste nikdy neplánovali používať Flash
Jedným z hlavných dôvodov, prečo je prvok CANVAS taký neprehľadný, je to, že si mnoho dizajnérov zvyklo na úplne statický web. Obrázky môžu byť animované, ale to je hotové GIF, a samozrejme, môžete vložiť video na stránky, ale opäť je to statické video, ktoré jednoducho sedí na stránke a možno sa spustí alebo zastaví v dôsledku interakcie, ale to je všetko.
Element CANVAS vám umožňuje pridať oveľa viac interaktivity na vaše webové stránky, pretože teraz môžete dynamicky ovládať grafiku, obrázky a text pomocou skriptovacieho jazyka. Element CANVAS vám pomôže premeniť obrázky, fotografie, mapy a grafy na animované prvky.
Kedy zvážiť použitie prvku plátna
Pri rozhodovaní, či použiť prvok CANVAS, by ste mali ako prvé zohľadniť svoje publikum.
Ak vaše publikum primárne používa Windows XP a IE 6, 7 alebo 8, potom bude vytvorenie funkcie dynamického plátna zbytočné, pretože tieto prehľadávače ju nepodporujú.
Ak zostavujete aplikáciu, ktorá sa bude používať iba na počítačoch so systémom Windows, môže byť vaším najlepším riešením Flash. Aplikácia použitá v počítačoch Windows a Mac by mohla ťažiť z aplikácie Silverlight.
Ak je však potrebné vašu aplikáciu zobraziť na mobilných zariadeniach (Android aj iOS), tak aj na moderných stolné počítače (aktualizované na najnovšie verzie prehľadávača), potom je použitie prvku CANVAS dobrou voľbou.
Pamätajte, že použitie tohto prvku vám umožňuje mať záložné možnosti, ako sú statické obrázky pre staršie prehliadače, ktoré ho nepodporujú.
Neodporúča sa však používať plátno HTML5 pre všetko. Mal by si nikdy použite ho napríklad na svoje logo, nadpis alebo navigáciu (aj keď jeho použitie na animáciu časti niektorého z nich by bolo v poriadku).
Podľa špecifikácie by ste mali použiť prvky, ktoré sú najvhodnejšie pre to, čo sa pokúšate vytvoriť. Takže použitie prvku HEADER spolu s obrázkami a textom je vhodnejšie ako prvku CANVAS pre vašu hlavičku a logo.
Tiež ak vytvárate a webstránka alebo aplikácia, ktorá sa má použiť na neinteraktívnom médiu, ako je tlač, mali by ste si uvedomiť, že prvok CANVAS, ktorý bol dynamicky aktualizovaný, sa nemusí tlačiť podľa vašich očakávaní. Môžete získať tlač aktuálneho obsahu alebo záložného obsahu.