Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)

canvas - Český HTML 5 manuál

HTML a CSS Manuál Multimédia canvas - Český HTML 5 manuál

ONEbit hosting Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

Tag <canvas> umožňuje do HTML dokumentu vložit kreslící plátno. Samotné kreslení se potom provádí skripty (většinou JavaScriptem). HTML jako takové plátno pouze poskytuje a samo na něj nemůže kreslit.

O použití JavaScriptu pro kreslení na <canvas> pojednává článek Canvas aneb grafika JavaScriptem .

Rozdíl mezi plátnem a obrázkem je samozřejmě ten, že plátno se vykresluje v reálném čase bez obnovení stránky. Přes HTML <canvas> fungují hry, grafy, animace apod.

Atributy

Plátno canvasu může obsahovat následující atributy:

  • height - Výška plátna v pixelech.
  • width - Šířka plátna v pixelech.

Ukázka použití

<canvas id="canvas"></canvas>

<script type="text/javascript">
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        // Vyplní čtverec o velikosti a = 100 na pozici 20, 20
        context.fillRect(20, 20, 100, 100);
        // Vymažeme vevnitř toho čtverce pole 80x80
        context.clearRect(30, 30, 80, 80);
        // A vykreslíme si tam obrys
        context.strokeRect(40, 40, 60, 60);
</script>

Výsledek:

Ukázka použití HTML 5 tagu canvas k jednoduchému kreslení přes JavaScript

 

 

Manuál pro vás napsal David Čápka
Avatar
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Miniatura
Všechny články v sekci
Multimédia - Český HTML 5 manuál
Aktivity (1)

 

 

Komentáře

Avatar
matesax
Redaktor
Avatar
matesax:18.8.2012 16:57

// Vymežeme vevnitř toho čtverce pole 80x80

 
Odpovědět 18.8.2012 16:57
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovědět 18.8.2012 16:57
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
matesax
Redaktor
Avatar
Odpovídá na matesax
matesax:18.8.2012 16:57

Pardon - byly tam mezery...

// Vymežeme vevnitř toho čtverce pole 80x80
........↑

 
Odpovědět 18.8.2012 16:57
Avatar
matesax
Redaktor
Avatar
Odpovídá na David Čápka
matesax:18.8.2012 16:59

Není zač - mám to vždy tak, že se ani nesnažím při tvorbě hledat chyby. Stejně se objeví až při publikaci...

 
Odpovědět 18.8.2012 16:59
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 4 zpráv z 4.