Základy HTML5 Canvas 1 |
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í a jak jej umístit webové stránky.
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í.
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 webové aplikace 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');
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();
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();
// První čára (7px)
G_Context.lineWidth = 7;
// Druhá čára (14px)
G_Context.lineWidth = 14;
// Třetí čára (20px)
G_Context.lineWidth = 20;
// 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)';
// 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';
// 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 ve webové aplikaci. 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 |