Kreslení čar přes canvas v JavaScriptu
Začněme jednoduše - kreslením čar. Abyste porozuměli, jak se to dělá, představte si, že máte list papíru a tužku. Můžete kreslit na tomto listu, nebo můžete bez kreslení jednoduše posunout tužku na požadované místo.
Stejným způsobem funguje i JavaScript: má
tužku (nebo pero pro kreslení), na požadované
místo ji můžete přesunout pomocí
metody moveTo, a kreslit - pomocí
metody lineTo.
Oba metody jako parametry přijímají bod, do
kterého se má posunout hrot peru - prvním parametrem
souřadnici vodorovně, a druhým - svisle.
Počátek souřadnic - bod 0,
0 - je levý horní roh prvku.
Když se pero přesouvá na požadované místo -
metoda moveTo pouze přesouvá, a
lineTo během přesunu kreslí
čáru od aktuální polohy pera do bodu,
do kterého se přesune.
Avšak, pokud spustíte výše uvedený kód
- nic se nestane: je nutné napsat
ještě dva příkazy: první příkaz beginPath
by měl být uveden před začátkem kreslení
čáry, a druhý příkaz stroke musí
být volán po všech kombinacích moveTo
a lineTo, aby se čára nakreslila.
Takže, pojďme napsat funkční kód pro kreslení čáry:
Nakresleme čáru
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.stroke();
:
Nakresleme fajfku
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let 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();
:
Nakresleme trojúhelník
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let 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();
:
Nakresleme čtvereček
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let 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();
:
Uzavírání tvarů
Pro kreslení uzavřeného tvaru nemusíte
udělat všechny čáry - poslední čára může
být nakreslena automaticky a tvar uzavřen.
K tomu před metodou stroke je třeba
zavolat metodu closePath.
Tato metoda se snaží uzavřít tvar kreslením přímé čáry z koncového bodu do počátečního. Pokud byl tvar již uzavřen nebo je pouhým bodem, metoda nic nedělá.
Pojďme nakreslit trojúhelník pomocí closePath:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let 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();
:
Vyplňování tvarů
Místo metody stroke lze použít
metodu fill - přitom tvar nemusí být
nutně zcela uzavřený - vyplní se
i tak:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let 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 také
ctx.fill();
:
