Kształty HTML Canvas

Instancja

Przykład 1

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
ctx.stroke();

Spróbuj sam

Rysowanie linii na płótnie Canvas

Rysowanie linii używa ścieżki na płótnie:

Metoda

beginPath() Metoda rozpoczyna nową ścieżkę. Nie rysuje niczego, tylko definiuje nową ścieżkę.

moveTo() Definiuje początek linii. Nie rysuje niczego, tylko ustawia punkt początkowy.

lineTo() Metoda definiuje koniec linii. Nie rysuje niczego, tylko ustawia punkt końcowy.

stroke() Metoda rzeczywiście rysuje linie. Domyślny kolor konturu to czarny.

Więcej przykładów

Przykład 2

ctx.beginPath();
ctx.moveTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.stroke();

Spróbuj sam

Przykład 3

ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(175,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
ctx.stroke();

Spróbuj sam

Wskazówka

Jeśli chcesz narysować prostokąt, nie musisz rysować 4 linii.

W następnym rozdziale nauczysz się używać drawRect() Metoda do rysowania prostokąta.

Atrybut strokeStyle

strokeStyle Atrybuty definiują styl używany do rysowania na płótnie.

Musisz to zrobić przed wywołaniem stroke() Ustaw ją przed metodą.

Instancja

ctx.beginPath();
// Definiowanie prostokąta
ctx.moveTo(20,20);
ctx.lineTo(175,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
// Definiowanie trójkąta
ctx.moveTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.strokeStyle = "red";
ctx.stroke();

Spróbuj sam

Zobacz również:

Pełne podręcznik referencyjny Canvas CodeW3C.com