Kreslenie čiar pomocou canvas v JavaScripte
Začnime jednoducho - kreslením čiar. Aby ste pochopili, ako sa to robí, predstavte si, že máte list papiera a ceruzku. Môžete kresliť na tomto liste, alebo môžete bez kreslenia jednoducho presunúť ceruzku na požadované miesto.
Rovnako funguje aj JavaScript: má
ceruzku (alebo pero na kreslenie), na požadované
miesto ho môžete presunúť pomocou
metódy moveTo, a kresliť - pomocou
metódy lineTo.
Obe metódy ako parametre prijímajú bod, do
ktorého sa má posunúť hrot pera - prvým parametrom
súradnicu vodorovne, a druhým - zvisle.
Počiatok súradníc - bod 0,
0 - je ľavý horný roh prvku.
Keď sa pero presunie na požadované miesto -
metóda moveTo len presunie, a
lineTo počas presunu kreslí
čiaru od aktuálnej polohy pera do bodu,
do ktorého sa presunie.
Avšak, ak spustíte vyššie uvedený kód
- nič sa nestane: je potrebné napísať
ešte dva príkazy: prvý príkaz beginPath
musí byť uvedený pred začatím kreslenia
čiary, a druhý príkaz stroke musí
byť volaný po všetkých kombináciách moveTo
a lineTo na to, aby sa čiara nakreslila.
Takže, napíšme pracovný kód na kreslenie čiary:
Nakreslíme čiaru
html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.stroke();
Результат:
Nakreslíme fajku
html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.stroke();
Результат:
Nakreslíme trojuholník
html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.lineTo(50, 50);
ctx.stroke();
Результат:
Nakreslíme štvorček
html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.closePath();
ctx.stroke();
Результат:
Uzavretie útvarov
Na kreslenie uzavretého útvaru nie je nevyhnutné
urobiť všetky čiary - posledná čiara sa môže
nakresliť automaticky a uzavrieť útvar.
Na to pred metódou stroke by sa mal
volať metóda closePath.
Táto metóda sa pokúša uzavrieť útvar, kresliac priamu čiaru z koncového bodu do počiatočného. Ak bol útvar už uzavretý alebo je len bodom, potom metóda nerobí nič.
Nakreslime trojuholník pomocou closePath:
html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
//ctx.lineTo(50, 50); - tento krok vynecháme
ctx.closePath();
ctx.stroke();
Результат:
Vyplnenie útvarov
Namiesto metódy stroke je možné použiť
metódu fill - pričom útvar nemusí byť nevyhnutne
úplne uzavretý - vyfarbí sa aj tak:
html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
//ctx.lineTo(50, 50); - tento krok vynecháme
//ctx.closePath(); - a tento tiež
ctx.fill();
Результат: