Začínáme s HTML5 canvasem

Tento článek je překladem anglického originálu vydaného na Dev.Opera. Autorem původního textu je Mihai Sucan.

Úvod

Specifikace HTML5 obsahuje řadu nových vlastností, jednou z nich je značka canvas . HTML 5  canvas vám nabízí snadnou možnost kreslení grafiky pomocí JavaScriptu. V každé značce canvas můžete použít „context“, jehož javascriptové metody nakreslí cokoliv chcete. Prohlížeče mohou implementovat více contextů s rozličnými API.

Většina prohlížečů implementovala 2D context canvasu – Opera, Firefox, Chrome a Safari (IE canvas nepodporuje, ale většina API canvasu je v něm snadno emulovatelná pomocí VML – pozn. překl.). Existuje také experimentální build Opery s implementací 3D contextu a rozšíření, které přidá podporu 3D contextu do Firefoxu:

• Build Opery s 3D canvasem, HTML videm a podporou File I/O
• Více o používání 3D contextu v Opeře
• Více o 3D contextu ve Firefoxu.

Tento článek vás provede základy 2D contextu canvasu, používáním základních funkcí včetně čar, tvarů, obrázků, textu a dalších. Budeme předpokládat, že znáte základy JavaScriptu.

Základy používání canvasu

Použití canvasu na vaší stránce je velmi jednoduché, stačí přidat značku <canvas> do vašeho HTML, např.:

<canvas id="myCanvas" width="300" height="150">
  Fallback content (náhradní obsah) pro prohlížeče, které canvas nepodporují.
</canvas> 

Definovali jsme id elementu, abychom se na něj mohli snadno odkazovat z JavaScriptu a také jsme definovali jeho šířku a výšku. Tím jsme si vytvořili kreslící plochu. Pojďte si něco nakreslit.

Pro kreslení do canvasu budeme potřebovat JavaScript. Nejprve vytvoříme referenci na náš canvas pomocí getElementById a následně inicializujeme požadovaný context. Pak už můžeme začít kreslit do canvasu pomocí rozhraní contextu, který jsme inicializovali. Následující skript (živá ukázka) do našeho canvasu nakreslí jednoduchý obdélník:

// Odkaz na canvas
var elem = document.getElementById('myCanvas');

// Vždy kontrolujte dostupnost vlastností a metod, to aby skript skript
// v nějakém prohlížeči "nehavaroval".
if (elem && elem.getContext) {
  // získáme 2d context.
  // Zapamatujte si: pro jednu značku canvas můžete inicializovat jen 1 context.
  var context = elem.getContext('2d');
  if (context) {
    // Nyní nakreslíme obdélník.
    // Zadáme souřadnice x,y následované šířkou a výškou.
    context.fillRect(0, 0, 150, 100);
  }
} 

Skript můžete vložit ho hlavičky vašeho dokumentu nebo do externího souboru, to je na vás.

API 2D contextu

Nyní, když jsme si vytvořili náš první příklad, se můžeme podívat na API 2D contextu hlouběji, ať vidíme, co máme k dispozici.

Kreslení čar

Pokud jste si prostudovali příklad výše, je pro vás jednoduché nakreslit obdélník jakékoliv barvy.

Pomocí vlastností fillStyle a strokeStyle snadno nastavíte, jaká barva bude použita pro vyplnění a jaká pro obrys. Můžete používat stejné hodnoty barev jako v kaskádových stylech: šestnáctkové kódy, rgb(), rgba() and dokonce hsla() pokud to prohlížeč podporuje (např. Opera 10 a Firefox 3).

Metoda fillRect nakreslí vyplněný obdélník, metoda strokeRect nakreslí obdélník bez výplně obsahující pouze obrysy. Pokud chcete vyčistit část canvasy, můžete použít metodu clearRect. Všechny tyto tři metody používají stejné argumenty: x, y, width, height. První dva argumenty jsou souřadnice x, y, další dva argumenty jsou šířka a výška obdélníku.

Tloušťku pak nastavíme vlastností lineWidth. Podívejme se na příklad používající metody fillRect, strokeRect a  clearRect :

context.fillStyle   = '#00f'; // modrá
context.strokeStyle = '#f00'; // červená
context.lineWidth   = 4;

// Nakreslíme obdélníky.
context.fillRect  (0,   0, 150, 50);
context.strokeRect(0,  60, 150, 50);
context.clearRect (30, 25,  90, 60);
context.strokeRect(30, 25,  90, 60); 

Výstup tohoto příkladu najdete na obrázku 1.

Obr. 1: Ukázka použití fillRect, strokeRect a clearRect.

Cesty (paths)

Cesty vám umožní kreslit libovolné tvary. Napřed vyznačíte obrys, ten pak můžete vyplnit a nakreslit obrysovou čáru, pokud chcete. Vytvoření tvaru je jednoduché – na začátku zavoláte beginPath(), následně nakreslíte cestu pomocí čar a dalších metod. Jakmile jste hotovi, zavoláte fill a stroke  – pokud chcete tvar vyplnit nebo vykreslit obrysovou čáru. Na konci zavoláte metodu  closePath().

Následuje příklad – tento kód nakreslí trojúhelník:

// Nastavení stylu
context.fillStyle   = '#00f';
context.strokeStyle = '#f00';
context.lineWidth   = 4;

context.beginPath();
// Začíná se v levém horním rohu
context.moveTo(10, 10); // souřadnice (x,y)
context.lineTo(100, 10);
context.lineTo(10, 100);
context.lineTo(10, 10);

// Hotovo. Nyní tvar vyplníme a nakreslíme obrys.
// Pozn.: vyznačený tvar nebude viditelný, dokud nezavoláte jednu z těchto dvou metod.
context.fill();
context.stroke();
context.closePath(); 

Výsledek bude stejný jako na obrázku 2.

Obr. 2: Trojúhelník.

Připravil jsem pro vás i komplikovanější cesty kombinující čáry, křivky a oblouky – jen se podívejte.

Vkládání obrázků

Metoda drawImage vám dovolí vložit do vašeho canvasu obrázek (ze značek img nebo canvas). V Opeře můžete do canvasu nakreslit i SVG obrázky. (Metoda drawImage je jednou z metod, kterou není možné emulovat v Internet Exploreru – pozn. překl.) Jedná se o komplikovanou metodu, která používá tři, pět nebo devět argumentů:

• Tři argumenty: základní použití drawImage obsahuje argument odkazující na vkládaný obrázek a dvě souřadnice obsahující místo vložení do vašeho contextu v canvasu.
• Pět argumentů: o něco komplikovanější varianta drawImage obsahuje předchozí tři argumenty a navíc šířku a výšku vkládaného obrázku (pro případ, že chcete změnit jeho velikost).
• Devět argumentů: nejkomplikovanější použití drawImage obsahuje předchozích pět argumentů a navíc dvě souřadnice uvnitř vkládaného obrázku a také šířku a výšku. Tuto variantu použijete, pokud chcete obrázek dynamicky oříznout před jeho vložením do canvasu.

Následující kód ukazuje všechny tři způsoby použití  drawImage :

// Tři argumenty: element, cílové souřadnice (x,y).
context.drawImage(img_elem, dx, dy);

// Pět argumentů: element, cílové souřadnice (x,y)
// a cílová šířka s výškou.
context.drawImage(img_elem, dx, dy, dw, dh);

// Devět argumentů: element, zdrojové souřadnice (x,y), šířka a výška pro oříznutí,
// cílové souřadnice a cílová šířka s výškou (pro změnu velikosti).
context.drawImage(img_elem, sx, sy, sw, sh, dx, dy, dw, dh); 

Výsledek bude vypadat jako na obrázku 3.

Obr. 3: Příklad použití drawImage .

Pokračování příště

To není všechno. Příště vás seznámíme s dalšími možnostmi canvasu, jakou je práce s pixely, textem a používání gradientů.

Tento článek je překladem textu HTML 5 canvas – the basics, jehož autorem je Mihai Sucan a je zde zveřejněn s laskavým svolením Opera Software.