Začínáme s HTML5 canvasem: texty, stíny, gradienty

Tento článek je druhým dílem překladu anglického originálu vydaného na Dev.Opera. Autorem původního textu je Mihai Sucan. První díl jsme vydali minulý týden.

Práce s pixely

Rozhraní 2d contextu nabízí tři metody pro kreslení na úrovni pixelů: createImageData, getImageData a  putImageData.

Vlastní pixely jsou uchovávány v objektech typu ImageData. Každý objekt má tři vlastnosti: width, height a data. Vlastnost data je typu CanvasPixelArray a obsahuje prvky o počtu width*height*4; tj. pro každý pixel jsou definovány hodnoty červené, zelené, modré barvy a průhlednost (všechny hodnoty se pohybují v rozmezí 0 až 255 a to včetně průhlednosti!). Pixely jsou v pořadí zleva doprava, řádek po řádku shora dolů.

Abychom lépe porozuměli, jak to celé funguje, podívejme se na příklad vykreslující blok červených pixelů.

// Vytvoříme objekt ImageData.
var imgd = context.createImageData(50,50);
var pix = imgd.data;

// Každý pixel nastavíme na průhlednou červenou.
for (var i = 0; n = pix.length, i < n; i += 4) {
  pix[i  ] = 255; // červená barva
  pix[i+3] = 127; // průhlednost
}

// Vykreslíme objekt ImageData na zadané souřadnice x, y.
context.putImageData(imgd, 0,0); 

Poznámka: ne všechny prohlížeče podporují metodu createImageData. V takových případech budete potřebovat vytvořit váš objekt ImageData pomocí metody getImageData. Podívejte se na zdrojový kód příkladu.

S podporou ImageData toho ale dokážete víc. Můžete například aplikovat filtry na obrázky nebo provádět matematické vizualizace (jako třeba fraktály apod.). Následující kód vám ukáže, jak vytvořit filtr pro jednoduchou inverzi barev:

// Získáme CanvasPixelArray z daných souřadnic a rozměrů.
var imgd = context.getImageData(x, y, width, height);
var pix = imgd.data;

// Projdeme všechny pixely a zinvertujeme barvy.
for (var i = 0, n = pix.length; i < n; i += 4) {
  pix[i  ] = 255 - pix[i  ]; // červená
  pix[i+1] = 255 - pix[i+1]; // zelená
  pix[i+2] = 255 - pix[i+2]; // modrá
  // i+3 je průhlednost (čtvrtá složka)
}

// Nakreslíme ImageData na dané souřadnice x, y.
context.putImageData(imgd, x, y); 

Obrázek 4 ukazuje filtr pro inverzi barev aplikovaný na banner Opery (porovnejte s obrázkem 3 v minulém díle, který obsahoval originální barvy).

Obr. 4: Ukázka filtru pro inverzi barev.

Text

API pro text je dostupné pouze v nedávných nočních buildech WebKitu a Firefoxu 3.5, ale rozhodl jsem se je pro úplnost zahrnout.

Následující vlastnosti najdete u contextu:

• font: Určuje font textu stejným způsobem, jako v kaskádových stylech funguje vlastnost  font-family
• textAlign: Určuje vodorovné zarovnání textu. Hodnoty: start, end, left, right, center. Výchozí hodnota: start.
• textBaseline: Určuje svislé zarovnání textu. Hodnoty: top, hanging, middle, alphabetic, ideographic, bottom. Výchozí hodnota: alphabetic.

Pro kreslení textu máte dvě metody: fillText a strokeText. První metoda vykreslí textový obrys vyplněný podle aktuální hodnoty fillStyle. Druhá metoda vykreslí obrys textu podle hodnoty strokeStyle. Obě používají tři argumenty: text, který chcete zobrazit a souřadnice x, y, na kterých se má text zobrazit. Existuje také volitelný čtvrtý argument – maximální šířka. Ta zařídí, že prohlížeč text „zdrcne“ (shrink) na zadanou šířku, když je to potřeba.

Vlastnosti pro zarovnání textu ovlivňují pozici textu relativně k zadaným souřadnicím x, y, které zadáte kreslicí metodě.

Ukažme si příklad. Následující kód je jednoduchý příklad vykreslující text „Hello world“.

context.fillStyle    = '#00f';
context.font         = 'italic 30px sans-serif';
context.textBaseline = 'top';
context.fillText  ('Hello world!', 0, 0);
context.font         = 'bold 30px sans-serif';
context.strokeText('Hello world!', 0, 50); 

Obrázek 5 ukazuje jeho výstup.

Obr. 5: Jednoduché zobrazení textu pomocí canvasu.

Stíny

API pro stíny je v tuto chvíli implementované pouze v Konqueroru a nočních buildech Firefoxu 3.5. Obsahuje tyto čtyři vlastnosti:

• shadowColor: nastavuje barvu stínu, hodnota je stejná jako hodnota příslušné vlastnosti kaskádových stylů
• shadowBlur: nastaví velikost rozostření stínu v pixelech. Čím nižší hodnota, tím ostřejší stín bude. Je to podobný efekt jako gaussiánského rozostření ve Photoshopu
• shadowOffsetX a shadowOffsetY: specifikují vodorovné a svislé posunutí stínu, opět v pixelech

Použití je velmi jednoduché, jak ukazuje následující příklad s ukázkou stínu:

context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur    = 4;
context.shadowColor   = 'rgba(255, 0, 0, 0.5)';
context.fillStyle     = '#00f';
context.fillRect(20, 20, 150, 100); 

Výsledek zobrazení ukazuje obrázek 6.

Obr. 6: Ukázka stínu pomocí canvasu – modrý obdélník s červeným stínem.

Gradienty

Vlastnostem fillStyle a strokeStyle lze přiřadit místo řetězců i objekt CanvasGradient, který umožní nastavit barevné gradienty namísto pevných barev pro obarvení obrysů a výplní.

K vytvoření objektu CanvasGradient můžete použít dvě metody: createLinearGradient a createRadialGradient. První z nich vytváří lineární gradient – pásy všech barev směřují jedním směrem, zatímco druhá vytváří radiální gradient – soustředné barevné kružnice.

Jakmile máte vytvořen objekt s gradientem, můžete přidat další barvu pomocí metody  addColorStop.

Následující kód vám ukáže, jak na to:

// Musíte nastavit zdrojové a cílové souřadnice gradientu
// (od místa, kde začíná, do místa, kde končí).
var gradient1 = context.createLinearGradient(sx, sy, dx, dy);

// Nyní můžete přidávat do gradientu barvy.
// První argument určuje pozici barvy v našem gradientu.
// Může nabývat hodnot od 0 (začátek gradientu) do 1 (konec gradientu).
// Druhý argument určuje vlastní barvu ve stejném formátu,
// jaký používají kaskádové styly.
gradient1.addColorStop(0,   '#f00'); // red
gradient1.addColorStop(0.5, '#ff0'); // yellow
gradient1.addColorStop(1,   '#00f'); // blue

// U radiálního gradientu musíte také určit zdrojovou a cílovou kružnici
// Souřadnice x, y definují střed kružnic
var gradient2 = context.createRadialGradient(sx, sy, sr, dx, dy, dr);

// Přidávání barev probíhá stejně jak u lineárního gradientu. 

Připravil jsem i složitější příklad, který používá lineární gradient, stíny a text. Výsledek vidíte na obrázku 7.

Obr. 7: Příklad s lineárním gradientem.

Online ukázky s canvasem

Pokud chcete vidět, co lze s canvasem dokázat, podívejte se na následující projekty:

• Opera Widgety:
  • Akvárium
  • Kreslicí aplikace
  • Spirograf
• Online projekty a dema:
  • Newton polynom
  • Canvascape – „3D Walker“
  • Paint.Web – kreslicí demo aplikace, open-source
  • Star-field flight
  • Interaktivní blob

Závěr

Canvas je jednou z nejzajímavějších částí HTML5 a je připraven k použití v moderních prohlížečích. Nabízí vše, co potřebujete k výrobě her, vylepšení grafického rozhraní apod. Rozhraní 2D kontextu obsahuje bohaté spektrum možností navíc k metodám, které byly diskutovány v článku. Doufám, že jsem vám nabídl pevné základy a vzbudil touhu poznat ještě víc.

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.