Tento prvek má výhody oproti jiným technologiím
HTML5 obsahuje vzrušující prvek nazvaný CANVAS. Má spoustu využití, ale pro jeho použití je třeba se naučit JavaScript, HTML a někdy i CSS.
To dělá prvek CANVAS trochu skličující pro mnoho návrhářů a ve skutečnosti většina pravděpodobně ignoruje prvek, dokud nebudou spolehlivé nástroje pro vytváření animací a her pro CANVAS bez znalosti jazyka JavaScript.
Co HTML5 plátno je používán
Prvek HTML5 CANVAS lze použít pro spoustu věcí, které předtím museli použít vestavěnou aplikaci jako Flash pro generování:
- dynamická grafika
- online a offline hry
- animace
- interaktivní video a zvuk
Hlavním důvodem, proč lidé používají prvek CANVAS, je proto, že je snadné přeměnit obyčejnou webovou stránku na dynamickou webovou aplikaci a převést ji na mobilní aplikaci pro smartphony a tablety.
Pokud máme Flash, proč potřebujeme plátno?
Podle specifikace HTML5 je prvek CANVAS:
"... bitmapové plátno závislé na rozlišení, které lze použít k vykreslení grafů, grafické hry, umění nebo jiných vizuálních obrazů za běhu."Prvek CANVAS umožňuje kreslit grafy, grafiku, hry, umění a další vizuální prvky přímo na webové stránce v reálném čase.
Možná si myslíte, že s Flashem to už můžeme udělat, ale mezi CANVASem a Flashem existují dva hlavní rozdíly:
- Element CANVAS je vložen přímo do HTML. Skripty, které na něm odkazují, jsou buď v HTML, nebo v propojeném externím souboru. To znamená, že prvek CANVAS je součástí modelu objektu dokumentu nebo DOM.
- Flash je vložený externí soubor. Používá buď element EMBED nebo OBJECT k zobrazení a nemůže interagovat přímo s ostatními prvky HTML. Vzhledem k tomu, že prvek CANVAS je součástí DOM, může do DOM komunikovat mnoha způsoby.
- Například můžete vytvořit animaci, která se změní, když dojde k interakci s jinou částí stránky - například vyplněním formuláře. S Flashem byste nejvíce mohli udělat film Flash nebo animaci, ale s CANVAS můžete vytvořit mnoho různých efektů, dokonce i přidání textu z pole formuláře do animace.
- Prvek CANVAS je nativně podporován webovými prohlížeči. Aby mohli uživatelé skutečně používat Flash, musí mít jejich prohlížeč nainstalovaný plugin. To je často problém pro většinu lidí kvůli zastaralým instalacím Flash nebo skutečnosti, že jejich operační systém jednoduše nepodporuje.
- Bývalo to, že každý prohlížeč měl nainstalovaný plugin, ale už tomu tak není a mnoho z nich dokonce odstraní plugin kvůli potížím. Navíc není ani dostupná na populární platformě iOS.
Plátno je užitečné i v případě, že jste nikdy neplánovali používat blesk
Jedním z hlavních důvodů, proč je prvek CANVAS tak mátl, je to, že mnoho designérů se zvyklo na zcela statický web. Obrázky mohou být animované, ale to se děje s GIF a samozřejmě můžete vložit video do stránek, ale opět je to statické video, které jednoduše sedí na stránce a možná se spustí nebo zastaví kvůli interakci, ale to je vše.
Prvek CANVAS vám umožní přidávat s vašimi webovými stránkami mnohem více interaktivity, protože nyní můžete dynamicky řídit grafiku, obrázky a text pomocí skriptovacího jazyka. Element CANVAS vám pomáhá obrátit obrázky, fotky, grafy a grafy do animovaných prvků.
Kdy uvažovat o použití prvku plátna
Vaše publikum by mělo být vaše první úvaha při rozhodování, zda použít prvek CANVAS.
Pokud je vaše publikum využíváno především Windows XP a IE 6, 7 nebo 8, vytváření dynamické funkce plátna bude zbytečné, protože tyto prohlížeče jej nepodporují.
Pokud budujete aplikaci, která bude použita pouze na počítačích se systémem Windows, může být Flash nejlepším řešením. Aplikace, která se má používat v počítačích se systémem Windows a Mac, může mít prospěch z aplikace Silverlight.
Pokud však je třeba aplikaci zobrazit na mobilních zařízeních (Android i iOS), stejně jako na moderních stolních počítačích (aktualizované na nejnovější verzi prohlížeče), je vhodná volba prvku CANVAS.
Mějte na paměti, že pomocí tohoto prvku můžete mít k dispozici záložní možnosti, jako jsou statické obrázky starších prohlížečů, které ho nepodporují.
Nicméně, nedoporučuje se používat vše pro to HTML5 plátno. Nikdy byste ji neměli používat pro věci, jako je vaše logo, nadpis nebo navigace (i když je používáte k oživení části kterékoli z nich by bylo v pořádku).
Podle specifikace byste měli používat prvky, které jsou nejvhodnější pro to, co se snažíte stavět. Takže použití prvku HEADER spolu s obrázky a textem je vhodnější než prvek CANVAS pro vaši hlavičku a logo.
Pokud vytváříte webovou stránku nebo aplikaci určenou k použití v neinteraktivním médiu, jako je tisk, měli byste si být vědomi toho, že prvek CANVAS, který byl dynamicky aktualizován, nemusí tisknout, jak očekáváte. Můžete získat tisk aktuálního obsahu nebo záložního obsahu.