Základy HTML5 Canvas 1

Úvod + čára a její vlastnosti

HTML Element <canvas> je zřejmě jednou z nejzajímavějších a nejočekávanějších značek v novém HTML5. Dnes bych Vám rád ukázal základní práci s touto párovou značkou a ukázal Vám jeho praktické využití.
Ve zkratce řečeno nám Canvas nabízí možnost kreslit za běhu pomocí JavaScriptu. Každý <canvas> obsahuje kreslící prostředí "context", které obsahuje veškeré vlastnosti a metody pro kreslení.

Výběr plátna

Nežli začneme se samotným kreslením, musíme nejdříve vybrat "plátno", na které chceme kreslit. Samotný canvas a naš kreslící plátno vybereme takto:

// První řádkem najdeme element canvas jako DOM objekt
var G_Canvas = document.getElementById('draw_canvas');
// Následujícím řádkem poté vyberem kreslící prostředí našeho Canvasu.
// To obsahuje všechny vlastnost a metody kreslení
var G_Context = G_Canvas.getContext('2d');

Kresba čáry (lineTo)

Konečně máme naše "plátno" a můžeme si jít něco nakreslit. Pro začátek začneme s jednoduchou čárou.

// První řádkem najdeme element canvas jako DOM objekt
var G_Canvas = document.getElementById('canvasTut1');
// Následujícím řádkem poté vyberem kreslící prostředí našeho Canvasu.
// To obsahuje všechny vlastnost a metody kreslení
var G_Context = G_Canvas.getContext('2d');

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, 50);
// Z toho podu poté vytvoříme čáru na souřadnice (x, y)
G_Context.lineTo(250, 250);
// Pomocí funkce stroke vykreslíme naší čáru na canvas 
G_Context.stroke();

Nastavení vlastností

Když už umíme nakreslit čáru, bylo by fajn, nastavit ji její barvu, tloušťku a další vlastnosti. Můžeme nastavit několik základních vlastností:
1) Tloušťku čáry: lineWidth
2) Barvu čáru: strokeStyle
3) Zakončení čáry: lineCap
4) Spojení čar: lineJoin
Pojdme si ukázat vlastnosti v praxi. Nejdříve si ukážeme použití. Vlastnosti nastavíme vždy předtím, než začneme kreslit. Vlastnost se nastavuje globálně celému kreslícímu prostředí a další nakreslená čára bude mít tyto vlastnosti. Kód vypadá takto:

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

// Nastavení tloušťky (20px)
G_Context.lineWidth = 20;

// Nastavení barvy (červená)
G_Context.strokeStyle = 'red';

// Nastavení zakončení (kulaté)
G_Context.lineCap = 'round';   

// Nastavení spojení čar (kulaté)
G_Context.lineJoin = 'round';

// Nakreslení čáry   
G_Context.moveTo(50, 40);
G_Context.lineTo(250, 120);
G_Context.lineTo(50, 200);
G_Context.stroke();

Šířka čáry:

// První čára (7px)
G_Context.lineWidth = 7;
// Druhá čára (14px)
G_Context.lineWidth = 14; 
// Třetí čára (20px)
G_Context.lineWidth = 20;

Barva čáry:

// První čára (červená)
G_Context.strokeStyle = 'red'; 
// Druhá čára (#456578)
G_Context.strokeStyle = '#456578'; 
// Třetí čára (50% průhledná červená)
G_Context.strokeStyle = 'rgba(255, 0, 0, 0.5)';

Zakončení čáry:

// První čára (bez konců)
G_Context.lineCap = 'butt';   
// Druhá čára (kulaté rohy)
G_Context.lineCap = 'round';   
// Třetí čára (hranaté rohy)
G_Context.lineCap = 'square';

Spojení čar:

// První čára (ostré)
G_Context.lineJoin = 'miter'; 
// Druhá čára (kulaté)
G_Context.lineJoin = 'round'; 
// Třetí čára (Zkosené)
G_Context.lineJoin = 'bevel';

Ukázali jsme si tedy základní práci s HTML5 Canvasem a nastavování vlastností čáry. V dalším článku si ukážeme práci s tvary, křivkami a výplněmi.

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