Základní použití

Prvek `<canvas>`

V úvodu tohoto tutoriálu se nejprve podívejme na samotný prvek <canvas>.

<canvas id="tutorial" width="150" height="150"></canvas>

Vypadá obdobně jako prvek <img>, od kterého se liší pouze tím, že nemá atributy src a alt. Prvek <canvas> má pouze dva atributy – width a height. Oba jsou nepovinné, a mohou být nastavovány pomocí DOM vlastností nebo CSS pravidel. Pokud není v atriburech specifikována žádná šířka či výška, bude mít plátno ve výchozím stavu 300 pixelů do šířky a 150 pixelů do výšky.

Atribut id není specifikován přímo u prvku <canvas>, ale je jedním z výchozích atributů HTML a může být aplikován téměř u každého HTML elementu (jako například atribut class). Atribut id je vždy vhodné nastavit, protože to usnadní rozeznávání konkrétního prvku <canvas> v našem skriptu.

Prvek <canvas> může být stylován jako každý jiný normální obrázek (okraje, rámečky, pozadí, atd..), tato pravidla však neovlivní skutečné zobrazení na plátně. Jak na to si v tomto tutorialu ukážeme později. Pokud nejsou žádná pravidla pro nastylování použita, bude plátno ve výchozím stavu zcela průhledné.

Nouzový obsah

Protože prvek <canvas> je relativně novou záležitostí a není implementován ve všech prohlížečích, včetně Firefox 1.0 a Internet Explorer, potřebujeme také způsob poskytnutí nouzového obsahu, jež se zobrazí, když prohlížeč tento prvek nepodporuje.

Poskytnout takový obsah je velmi jednoduché – je jím libovolný obsah pvku <canvas>. Prohlížeče, které plátno nepodporují, budou tento prvek zcela ignorovat a zobrazí nouzový obsah, ostatní vykreslí <canvas> normálně.

Jako nouzový obsah bychom například mohli poskytnout textový popis obsahu plátna, statický obrázek apod. a to např. takto:

<canvas id="akcieGraf" width="150" height="150">
  Aktuální cena akcie: €3.15 +0.15
</canvas>

<canvas id="hodiny" width="150" height="150">
  <img src="images/hodiny.png" width="150" height="150"/>
</canvas>

Poznámka: Implementace společnosti Apple se momentálně liší od specifikace v tom, že nepřipouští uzavřenou značku </canvas>. To znamená, že v Safari všechen alternativní obsah bude zobrazen. Takový obsah lze skrýt pomocí CSS nebo skriptováním.

Metoda `getContext()`

Pokud vytváříne HTML stránku a otevřete ji ve Firefoxu, pak v místě, které zabírá <canvas>, nic neuvidíne. Potřebujeme tedy nějaký prostředek k tomu, abychom mohli vykreslování spustit a zde přichází na řadu metoda getContext. Každý <canvas> element má DOM metodu nazývající se getContext pro přístup k vykreslovacím funkcím. getContext má pouze jeden parametr a to kontext zobrazení. V současné době je k dispozici pouze jeden kontext zobrazení a to dvourozměrné zobrazení. V budoucnu bychom se mohli setkat s trojrozměrným zobrazením, ale nyní si vystačíme s dvourozměrným.

var canvas = document.getElementById('platno');
var ctx = canvas.getContext('2d');

Na prvním řádku získáme DOM uzel pomocí metody getElementById a následně můžeme přistupovat ke kontextu zobrazení pomocí metody getContext.

Zamezení spuštění v nepodporovaných prohlížečích

U prohlížečů, které <canvas> nepodporují, potřebujeme způsob, jak zamezit spouštění vykreslovacího kódu. Toho dosáhneme testováním metody getContext. Ukázku kódu, kterou jsme uvedli výše, lze upravit takto:

var canvas = document.getElementById('platno');
if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // Zde je kód, který něco vykreslí
}

Veškerý vykreslovací kód by měl být podmíněn existencí této metody a prohlížeče, které <canvas> nepodporují, se jej tak nepokusí spustit.

Zkompletování

Dejme nyní vše dohromady do jednoduché HTML šablony, kterou budeme používat také ve všech dalších částech tohoto tutoriálu.

Šablona

Stáhnout tento soubor

<html>
  <head>
    <title>Canvas tutoriál</title>
    <script type="text/javascript">
      function kresli(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');
        }
      }
    </script>
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
  </head>
  <body onload="kresli();">
    <canvas id="tutorial" width="150" height="150"></canvas>
  </body>
</html>

Při letmém pohledu na skript uvidíme funkci nazvanou kresli, kterou spustíme, jakmile skončí načítání stránky (pomocí atributu onload u značky body). Tato funkce by také mohla být volána z setTimeout, setInterval nebo jiné funkce ovladače události tak dlouho, dokud se stránka nenačte.

Nezbytný úvod již máme za sebou a na dalších stránkách se již naučíme něco skutečného kreslit.

« Předchozí Následující »