HTML5 - Canvas Element

Prvek Plátno Je to jedna z nejočekávanějších novinek, které má HTML5 Protože se jedná o vážnou alternativu k doplňku Adobe Flash, díky jeho nativním možnostem a nezávislosti na knihovně třetích stran získáváme stabilitu a podporu prohlížeče přímo v případě problému s implementací standardu HTML5 .
Prvek Plátno nám umožňuje vymezit oblast v našich dokumentech HTML5 kde můžeme kreslit a dokonce přidávat efekty a pohyby pomocí Javascriptu.
Prvek Canvas
Než můžete s položkou začít pracovat Plátno„Definujeme jeho základní charakteristiky, máme, že je to prvek toku, je zcela nový v HTML5, jeho atributy jsou výška pro jeho výšku a šířka pro jeho šířku.
Podívejme se níže na malý příklad toho, jak můžeme v našem dokumentu definovat plátno:

 Příklad Váš prohlížeč prvek nepodporuje plátno 

Podívejme se rychle, co se stane v příkladu; nejprve definujeme styl, kde přiřadíme mírně tlustou hranici, abychom byli schopni rozlišit náš Plátno prázdný, poté spustíme prvek Canvas s jeho úvodním štítkem a definujeme jeho atributy výšky a šířky, do popisků umístíme zprávu v případě, že je dokument otevřen pomocí prohlížeče, který tuto specifikaci standardu nepodporuje.
Podívejme se nyní, jak tento kód, který jsme právě vysvětlili, vypadá v našem prohlížeči:

Jak v tuto chvíli vidíme, máme ve stylech definovány pouze ohraničení a prázdnou oblast, to znamená, že náš prohlížeč podporuje používání Plátno.
Naše první kresba
Jak jsme zmínili na začátku tutoriálu, abychom mohli kreslit a provádět akce na plátně, musíme použít Javascript, k tomu použijeme metodu nazvanou getContext () to nás staví do kontextu plátna a s ním mu můžeme říci, co má ukázat.
Můžeme kreslit postavy ve 2D i 3D, a proto procházíme v případě prvního argumentu „2d“.
Podívejme se na následující příklad, abychom lépe definovali, co vysvětlujeme:

 Příklad Váš prohlížeč prvek nepodporuje plátno 

Zde jsme jednoduše definovali proměnnou ctx ke kterému hodláme přiřadit objekt dokument a ten druhý zavolá metodu getContext a aplikujte jej na prvek Canvas; pak máme, že proměnná ctx volá metodu s názvem fillRect a k tomu předáme nějaké souřadnice, když se podíváme pozorně, předáme to 4 strany, podívejme se, že to nakreslilo v prohlížeči:

V tomto příkladu jsme nakreslili čtverec v našem Plátno„Není to nic velkolepého, nicméně nám to pomáhá ukázat, jak tento prvek funguje HTML5.Líbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod