Tento prvok má výhody nad inými technológiami
HTML5 obsahuje vzrušujúci prvok s názvom CANVAS. Má veľa využitia, ale na to, aby ste ju mohli používať, musíte sa naučiť JavaScript, HTML a niekedy aj CSS.
To robí prvok CANVAS trochu skľučujúcim pre mnohých dizajnérov a v skutočnosti väčšina z nich pravdepodobne ignoruje prvok, kým nebudú spoľahlivé nástroje na vytváranie animácií a hier CANVAS bez toho, aby vedeli, že je JavaScript.
Prečo sa HTML5 plátno používa
Element HTML5 CANVAS sa môže použiť pre veľa vecí, ktoré predtým ste museli použiť vstavanú aplikáciu ako Flash na generovanie:
- dynamická grafika
- on-line a offline hry
- animácie
- interaktívne video a audio
V skutočnosti hlavným dôvodom, prečo ľudia používajú prvok CANVAS, je to, že je jednoduché otočiť obyčajnú webovú stránku do dynamickej webovej aplikácie a potom konvertovať túto aplikáciu na mobilnú aplikáciu určenú pre smartfóny a tablety.
Ak máme Flash, prečo potrebujeme plátno?
Podľa špecifikácie HTML5 je prvok CANVAS:
"... rastrové plátno závislé od rozlíšenia, ktoré sa môže používať na rendering grafov, herných grafiky, umenia alebo iných vizuálnych obrázkov za behu."Prvok CANVAS vám umožňuje kresliť grafy, grafiku, hry, umenie a ďalšie vizuálne prvky priamo na webovej stránke v reálnom čase.
Možno si myslíte, že už s Flashom môžeme urobiť to, ale medzi CANVAS a Flash existujú dva hlavné rozdiely:
- Prvok CANVAS je vložený priamo do kódu HTML. Skripty, ktoré čerpajú z nich, sú buď v HTML, alebo v prepojenom externom súbore. To znamená, že prvok CANVAS je súčasťou modelu objektu dokumentu alebo DOM.
- Flash je vložený externý súbor. Používa buď element EMBED alebo OBJECT na zobrazenie a nemôže priamo komunikovať s ostatnými prvkami HTML. Pretože prvok CANVAS je súčasťou DOM, môže interagovať s DOM v mnohých smeroch.
- Môžete napríklad vytvoriť animáciu, ktorá sa zmení, keď sa interakcia s niektorou inou časťou stránky - napríklad s vyplneným prvkom formulára. Pomocou technológie Flash by najviac mohlo byť spustenie filmu Flash alebo animácie, ale s CANVAS môžete vytvoriť mnoho rôznych efektov, dokonca aj pridanie textu z poľa formulára do animácie.
- Element CANVAS je natívne podporovaný webovými prehliadačmi. Aby mohli používatelia skutočne používať Flash, musí ich prehliadač mať nainštalovaný doplnok. Toto 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.
- Zvyčajne bolo, že každý prehliadač mal nainštalovaný doplnok, ale už to tak nie je a mnohí dokonca odstránia plugin kvôli ťažkostiam. Navyše to ani nie je k dispozícii na populárnej platforme 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 mätúci, je, že mnohí dizajnéri sa zvykli na úplne statický web. Obrázky môžu byť animované, ale to sa deje s GIF a samozrejme môžete vložiť video do stránok, ale opäť je to statické video, ktoré jednoducho sedí na stránke a možno začne alebo zastavuje kvôli interakcii, ale to je všetko.
Prvok CANVAS vám umožňuje pridávať oveľa viac interaktivity do vašich webových stránok, pretože teraz môžete dynamicky ovládať grafiku, obrázky a text pomocou skriptovacieho jazyka. Prvok CANVAS vám pomôže otočiť obrázky, fotky, grafy a grafy na animované prvky.
Kedy zvážiť použitie prvku plátna
Vaše publikum by malo byť vašou prvou úvahou pri rozhodovaní, či sa má použiť element CANVAS.
Ak vaše publikum používa predovšetkým operačné systémy Windows XP a IE 6, 7 alebo 8, vytvorenie funkcie dynamického plátna bude zbytočné, pretože tieto prehliadače ho nepodporujú.
Ak vytvárate aplikáciu, ktorá sa bude používať iba na počítačoch so systémom Windows, Flash môže byť vašou najlepšou stávkou. Aplikácia, ktorá sa má používať v počítačoch so systémom Windows a Mac, môže byť prínosom pre aplikáciu Silverlight.
Ak je však vaša aplikácia potrebná na zobrazovanie na mobilných zariadeniach (Android aj iOS), ako aj na moderné stolové počítače (aktualizované na najnovšie verzie prehliadača), potom je vhodným výberom prvok CANVAS.
Nezabudnite, že pomocou tohto prvku môžete mať záložné možnosti, ako sú statické obrázky starších prehliadačov, ktoré ho nepodporujú.
Neodporúča sa však používať plátno HTML5 pre všetko. Nikdy by ste ho nemali používať na veci, ako je vaše logo, titulok alebo navigácia (aj keď to používa na animáciu časti ktorejkoľvek z nich by bolo v poriadku).
Podľa špecifikácie by ste mali použiť prvky, ktoré sú najvhodnejšie pre to, čo sa snažíte stavať. Používanie prvku HEADER spolu s obrázkami a textom je lepšie ako prvok CANVAS pre vaše hlavičky a logo.
Ak vytvárate webovú stránku alebo aplikáciu určenú na použitie v neinteraktívnom médiu, ako je tlač, mali by ste si uvedomiť, že element CANVAS, ktorý bol dynamicky aktualizovaný, nemusí tlačiť podľa očakávania. Môžete získať tlač aktuálneho obsahu alebo záložného obsahu.