canvas - Český HTML 5 manuál

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

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

 

  Aktivity (1)

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

 

 

Komentáře

Avatar
matesax
Redaktor
Avatar
matesax:

// 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:

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:

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.