Rysowanie linii za pomocą canvas w JavaScript
Zacznijmy od prostego - od rysowania linii. Aby zrozumieć, jak to się robi, wyobraź sobie, że masz kartkę papieru i ołówek. Możesz rysować na tej kartce, ale możesz też bez rysowania po prostu przesuwać ołówek w żądane miejsce.
Podobnie działa JavaScript: ma on ołówek
(lub pióro do rysowania), w żądane
miejsce możesz przesunąć go za pomocą
metody moveTo, a rysować - za pomocą
metody lineTo.
Oba metody przyjmują jako parametry punkt, do
którego przesunąć czubek pióra - pierwszym parametrem
współrzędną w poziomie, a drugim - w
pionie. Początek układu współrzędnych - punkt 0,
0 - to lewy górny róg elementu.
Kiedy pióro przesuwa się do żądanego punktu -
metoda moveTo po prostu przesuwa, a
lineTo w procesie przesuwania rysuje
linię od aktualnej pozycji pióra do punktu,
do którego się przesunie.
Jednakże, jeśli uruchomimy powyższy kod
- nic się nie stanie: konieczne jest napisanie
jeszcze dwóch komend: pierwsza komenda beginPath
powinna być podana przed rozpoczęciem rysowania
linii, a druga komenda stroke powinna
zostać wywołana po wszystkich kombinacjach moveTo
i lineTo po to, aby linia się narysowała.
A zatem, napiszmy działający kod do rysowania linii:
Narysujmy linię
<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();
:
Narysujmy ptaszka
<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();
:
Narysujmy trójkąt
<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();
:
Narysujmy kwadracik
<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();
:
Zamykanie figur
Do rysowania zamkniętej figury nie jest konieczne
robienie wszystkich linii - ostatnia linia może
narysować się automatycznie i zamknąć figurę.
W tym celu przed metodą stroke należy
wywołać metodę closePath.
Ta metoda próbuje zamknąć figurę, rysując prostą linię z punktu końcowego do początkowego. Jeśli figura była już zamknięta lub jest po prostu punktem, to metoda nic nie robi.
Narysujmy trójkąt, używając 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); - ten krok pomijamy
ctx.closePath();
ctx.stroke();
:
Wypełnianie figur
Zamiast metody stroke można użyć
metody fill - przy tym figura niekoniecznie
musi być całkowicie zamknięta - wypełni się
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); - ten krok pomijamy
//ctx.closePath(); - i ten też
ctx.fill();
:
