mozilla
Your Search Results

    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.

    Document Tags and Contributors

    Tags: 
    Contributors to this page: DJ.Maca, teoli, Triceo, fscholz, Pawell
    Last updated by: teoli,