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ę

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();

Результат:

Narysujmy ptaszka

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();

Результат:

Narysujmy trójkąt

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();

Результат:

Narysujmy kwadracik

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();

Результат:

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:

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); - 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:

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); - ten krok pomijamy
//ctx.closePath(); - i ten też
ctx.fill();

Результат:

Zadania praktyczne