HTML5 Canvas: Co to je a proč se používá

click fraud protection

HTML5 obsahuje vzrušující prvek zvaný CANVAS. Má mnoho využití, ale abyste jej mohli používat, musíte se naučit nějaký JavaScript, HTML, a někdy CSS.

Díky tomu je prvek CANVAS pro mnohé designéry trochu skličující a většina z nich bude pravděpodobně ignorovat prvek, dokud nebudou existovat spolehlivé nástroje pro vytváření animací a her CANVAS bez vědomí JavaScript.

K čemu se plátno HTML5 používá

Prvek CANVAS HTML5 lze použít pro mnoho věcí, které jste dříve museli použít ke generování vložené aplikace, jako je Flash:

  • Dynamická grafika
  • Online a offline hry
  • Animace
  • Interaktivní obraz a zvuk

Hlavním důvodem, proč lidé používají prvek CANVAS, je ve skutečnosti to, jak snadné je otočit obyčejnou webovou stránku do dynamické webové aplikace a poté tuto aplikaci převést na mobilní aplikaci pro použití na smartphonech a zařízeních tablety.

Pokud máme Flash, proč potřebujeme plátno?

Podle Specifikace HTML5, prvkem CANVAS je: „... bitmapové plátno závislé na rozlišení, které lze použít k okamžitému vykreslování grafů, herní grafiky, umění nebo jiných vizuálních obrazů.“

instagram viewer

Prvek CANVAS umožňuje kreslit grafy, grafiku, hry, umění a další vizuály přímo na webové stránce v reálném čase.

Možná si myslíte, že s Flashem to již můžeme udělat, ale mezi CANVAS a Flash existují dva hlavní rozdíly:

  1. Prvek CANVAS je vložen přímo do HTML. Skripty, které na něj kreslí, jsou buď v HTML, nebo v připojeném externím souboru. To znamená, že prvek CANVAS je součástí modelu objektu dokumentu (DOM).
    1. Flash je vložený externí soubor. K zobrazení používá prvek EMBED nebo OBJECT a nemůže přímo komunikovat s ostatními prvky HTML. Protože prvek CANVAS je součástí DOM, může s DOM interagovat mnoha způsoby.
    2. Můžete například vytvořit animaci, která se změní při interakci s nějakou jinou částí stránky - například při vyplňování prvku formuláře. S programem Flash byste mohli maximálně začít Flash film nebo animace, ale s CANVAS můžete vytvořit mnoho různých efektů, dokonce přidat text z pole formuláře do animace.
  2. Prvek CANVAS je nativně podporován webovými prohlížeči. Aby uživatelé mohli Flash skutečně používat, 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 to jednoduše nepodporuje.
    1. Bývalo to tak, že každý prohlížeč měl nainstalovaný plugin, ale to už neplatí a mnoho z nich kvůli problémům dokonce plugin odstranilo. Navíc není k dispozici ani u populárních platforma iOS.

Plátno je užitečné, i když jste nikdy neplánovali použít Flash

Jedním z hlavních důvodů, proč je prvek CANVAS tak matoucí, je to, že mnoho designérů si zvyklo na zcela statický web. Obrázky mohou být animované, ale to je hotovo GIF, a samozřejmě můžete vložit video na stránky, 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žňuje přidat na webové stránky mnohem více interaktivity, protože nyní můžete dynamicky ovládat grafiku, obrázky a text pomocí skriptovacího jazyka. Prvek CANVAS vám pomůže přeměnit obrázky, fotografie, grafy a grafy na animované prvky.

Kdy zvážit použití prvku plátna

Při rozhodování, zda použít prvek CANVAS, by mělo být vaším prvním hlediskem vaše publikum.

Pokud vaše publikum primárně používá Windows XP a IE 6, 7 nebo 8, pak bude vytváření funkce dynamického plátna zbytečné, protože tyto prohlížeče ji nepodporují.

Pokud vytváříte aplikaci, která bude použita pouze na počítačích se systémem Windows, může být vaším nejlepším řešením Flash. Aplikace, která se má používat v počítačích s Windows a Mac, by mohla těžit z aplikace Silverlight.

Pokud však vaši aplikaci je třeba prohlížet na mobilních zařízeních (Android i iOS) i moderních stolní počítače (aktualizováno na nejnovější verze prohlížeče), pak je použití prvku CANVAS dobrou volbou.

Mějte na paměti, že použití tohoto prvku vám umožňuje mít záložní možnosti, jako jsou statické obrázky pro starší prohlížeče, které jej nepodporují.

Nedoporučuje se však pro všechny používat plátno HTML5. Měl by jsi nikdy použijte jej například pro své logo, nadpis nebo navigaci (i když jeho použití k animaci části kteréhokoli z nich by bylo v pořádku).

Podle specifikace byste měli použít prvky, které jsou nejvhodnější pro to, co se pokoušíte vytvořit. Takže použití prvku HEADER společně s obrázky a textem je lepší než prvek CANVAS pro vaše záhlaví a logo.

Také pokud vytváříte a webová stránka nebo aplikace, která má být použita na 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 podle očekávání. Můžete získat tisk aktuálního obsahu nebo záložního obsahu.

instagram story viewer