Základy HTML5 Canvas 2

Tvary, křivky a jejich vlastnosti

V předchozím článku jsme si ukázali základní práci s canvasem, metodu lineTo a nastavování vlastností čar v našem kreslícím prostředí. Canvas nám však nabízí další metody pro kreslení. Jsou to metody quadraticCurveTo, bezierCurveTo, squer a arc Právě na tyto metody a nastavení jejich zobrazení bych se rád zěměřil v tomto článku.

Křivky

Jak už jsem zmínil, canvas nám nabízí dvě metody pro vykreslení křivek. První je quadraticCurveTo a druhá potom bezierCurveTo. Nejdříve se tedy podíváme na quadratickou křivku.

Quadratická křivka

Než začneme kreslit, rád bych Vám ukázal, jak kvadratická křivka funguje. Jak můžete vidět na interaktivní aplikaci níže, křivka je ovládána jedním kontrolním bodem. Pomocí myši můžete tahat jednotlivé body:

Kvadratická křivka se kreslí pomocí funcke quadraticCurveTo(). Ta má za parametry kontrolní bod a koncový bod. Počáteční bod si stejně jako u funkce lineTo zvolíme pomocí moveTo popřípadě je brán v potaz poslední použitá koncová poloha. Praktická ukázka:

// Výběr plátna
var G_Canvas = document.getElementById('canvasTut3');
var G_Context = G_Canvas.getContext('2d');

// Nastavení vlastností vykreslení
G_Context.lineWidth = 10;
G_Context.strokeStyle = '#FF0000';

G_Context.beginPath(); // Začneme novou cestu
// Nejdříve přesuneme náš "štětec" na pozici, kde chceme začít kreslit (x, y)
G_Context.moveTo(50, 200);
// Z toho bodu poté vytvoříme křivku
G_Context.quadraticCurveTo(150, 0, 250, 200);
// Vytažení křivky
G_Context.stroke();

Bezierová křivka

Bezierova křivka je pro změnu definována dvěma kontrolními body. Díky dvou kontrolním bodům nám umožňuje vytvořit komplexnější zakřivení. Pomocí myši můžete tahat jednotlivé body:

Bezirova křivka se kreslí pomocí funcke bezierCurveTo(). Ta má za parametry dva kontrolní bod a koncový bod. Názorná ukázka:

// Výběr plátna
var G_Canvas = document.getElementById('canvasTut4');
var G_Context = G_Canvas.getContext('2d');

// Nastavení vlastností
G_Context.lineWidth = 10;
G_Context.strokeStyle = '#FF0000';

G_Context.beginPath(); // Začneme novou cestu
// Nejdříve přesuneme náš "štětec" na pozici, kde chceme začít kreslit (x, y)
G_Context.moveTo(50, 200);
// Z toho podu poté vytvoříme křivku
G_Context.bezierCurveTo(120, 0, 150, 250, 250, 150);
// Vykreslení
G_Context.stroke();

Tvary - Čtverec / Kruh

Kromě funkce lineTo, quadraticCurveTo a bezierCurveTo nám canvas nabízí funkci rect a arc. Tyto funkce nám dovolí nakreslit čtverec a kruh (výseč kruhu). Použití je následující:

Čtverec

Čverec kreslíme pomocí funcke squer(). Této funkci předáme jako parametry levý horní roh (x, y) a šířku a výšku našeho čtverce. Třeba takto:

// Funkce pro vykreslení obdélníku vypadá takto:
G_Context.rect(x, y, šírka, výška);

// Použití
// Začátek cesty
G_Context.beginPath();
// Funkce pro vykreslení obdélníku. Parametry: (X, Y, Šířka, Výška) 
G_Context.rect(50, 50, 200, 100);
// Vytažení obdélníku
G_Context.stroke();

Kruh

Kruh kreslíme pomocí funkce arc(). Funkci předváváme jako parametr střed (x,y), poloměr, počáteční úhel, koncový úhel a zda vykreslovat proti hodinovým ručičkám. Použití je následující:

// Funkce pro vykreslení kruhu:
G_Context.arc(x, y, polomer, start_úhel, koncový_úhel, proti_hodinovým_ručičkám); 

//Použití
// Začátek cesty
G_Context.beginPath();
// Funkce pro vykreslení kruhu.
G_Context.arc(150, 102, 70, 0 , 2*Math.PI, false);
// Vytažení kruhu
G_Context.stroke();

Pomocí metody arc můžeme také vykreslovat výseč kruhu. Například takto:

// Funkce pro vykreslení výseče:
G_Context.arc(x, y, polomer, start_úhel, koncový_úhel, proti_hodinovým_ručičkám); 
// Úhly jsou definovány v radiánech.
// Pro převod na stupně můžeme použít uhel*(Math.PI/180)

G_Context.beginPath();
// Funkce pro vykreslení výseče:
G_Context.arc(150, 102, 70, 0, 225*(Math.PI/180), false);
// Vytažení výseče
G_Context.stroke();

Vlastní tvary

Metody rect a arc by nám samozřejmě nestačily. Tvary si můžeme kreslit sami pomocí metod lineTo, bezierCurveTo a quadraticCurveTo. Tvorba vlastních tvarů je poměrně jednoduchá. Pouze posládáme naše metody tak, aby na sebe navazovaly a máme hotovo. Ukážeme si to na tvorbě jednoduchého pětiúhelníku:

// Výběr plátna
var G_Canvas = document.getElementById('canvasTut5');
var G_Context = G_Canvas.getContext('2d');

G_Context.beginPath();
G_Context.lineWidth = 6;  
G_Context.strokeStyle = '#12abc9';
// Funkce pro vykreslení pětiúhelníku
G_Context.moveTo(75, 83);
G_Context.lineTo(151, 28);
G_Context.lineTo(226, 83);
G_Context.lineTo(198, 172);
G_Context.lineTo(104, 172);
G_Context.lineTo(75, 83);

// A uzavřeme náš tvar
G_Context.closePath();
G_Context.stroke();

Zatím nám náš tvar nepůsobí nijak jinak od několika čar. S tvary včak dokázeme dělat zajímavé věci. Jednou z nich je výplň

Výplně

Pomocí výplňí můžeme vykreslit námi nakreslené tvary. Máme tři základní typy výplní:
1) Barva: fill()
2) Přechod: createLinearGradient()
3) Vzor: createPattern()

Výplň, ať už barvou, přechodem nebo vzorem provádíme pomocí metod fillStyle() a fill(). FillStyle() nám nastaví typ výplně a fill() se poté postará o samotné vyplnění.

Barva

Pokud chceme náš tvar vyplnit barvou. Použijeme metodu fillStyle() a fill(). Metodě fillStyle zadáváme jako parametr barvu. Buď ve tvaru:
1) Název = red, green, blue, orange, ...
2) Hexadecimální = #FF0000, #00FF00, #0000FF, #FFFF00, ...
3) RGB = rgb(255, 0, 0), rgb(0, 255, 0), ...
3) RGBA rgba(255, 0, 0, 1), rgba(0, 255, 0, 0.5), ...
Například takto:

// Výběr plátna
var G_Canvas = document.getElementById('canvasTut10');
var G_Context = G_Canvas.getContext('2d');

G_Context.beginPath();
G_Context.lineWidth = 6;  
G_Context.strokeStyle = '#12abc9';
// Funkce pro vykreslení pětiúhelníku
G_Context.moveTo(75, 83);
G_Context.lineTo(151, 28);
G_Context.lineTo(226, 83);
G_Context.lineTo(198, 172);
G_Context.lineTo(104, 172);
G_Context.lineTo(75, 83);
// A uzavřeme náš tvar
G_Context.closePath();

// Vyplnění tvaru
G_Context.fillStyle = '#D0E206';
G_Context.fill();

//Vytažení 
G_Context.stroke();

Gradienda

Než budeme chtít vykreslit naší gradiendu, budeme si ji muset nejdříve vytvořit. K tomuto nám posloužím metoda createLinearGradient(). Té zadáme jako parametry počáteční body (x,y) a koncový body (x,y). Tím můžeme rovněž nastavit směr gradiendy.
Dále musíme gradiendě přiřadit barvy. To provedeme metodou addColorStop(), které předáme jako parametr id (číslo barvy [1, 2]) a barvu. Například takto:

... vykreslení tvaru ...
// Vyplnění tvaru gradiendou
// Vytvoření gradiendy
var gradiend = G_Context.createLinearGradient(75, 83, 226, 172);
// Přiřazení barev
gradiend.addColorStop(0, '#e70000'); // První barva
gradiend.addColorStop(1, '#ffba00'); // Druhá barva

G_Context.fillStyle = gradiend; // Jako styl vyplnění nastavíme naší gradiendu
G_Context.fill(); // A vyplníme tvar

Pokud budeme chtít například gradiendu kolmo zhora dolů, vytvoříme ji jako: createLinearGradient(75, 83, 75, 172)

Vzor

Předtím, než budeme chtít použít výplň vzorem, musíme jej, stejně jako u gradiendy, vytvořit. K tomuto nám posloužím metoda createPattern(). Té zadáme jako parametry obrázek, který chceme na pozadí a možnosti opakování pozadí. Použití je poté obdobné jako u gradiendy, například takto:

// Vytvoření objetu Image
var image = new Image();
// Jakmile je obrázek načten
image.onload = function(){
  // Vytvoření vzoru
  var pattern = G_Context.createPattern(image, 'repeat');  
  
  ... vykreslení objektu
  //Nastavení výplně
  G_Context.fillStyle = pattern;
  G_Context.fill();
  //Vytažení
  G_Context.stroke();
}
// Přiřazení zdroje k obrázku
image.src = './bg_wood.jpg';

Dnes jsme si ukázali jak vytvořit křivky, tvary, vlastní tvary a použití výplní. V dalším článku si ukážeme práci s textem a obrázky.

Pokud se Vám článek líbí, podpořte další tím, že dáte "Like" na Facebook nebo +1 na Google+ nebo nasdílíte tento článek dál. Jen na základně vaší zpětné vazby budu moci zjistit, zda-li mám psát dál, nebo ne.

Kontakt

Tomáš Hubík
Telefon+420 774 510 211
E-mailTomas.Hubik1@gmail.com
BydlištěOkres Opava
SkypeTomasHubik
74864131
SpolupracujiÚčetní Opava
Napište nám
Odeslat dotaz
Odeslat dotaz