Linie HTML Canvas

实例

// Tworzenie kanwy:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Definiowanie nowej ścieżki:
ctx.beginPath();
// Definiowanie punktu początkowego:
ctx.moveTo(0, 0);
// Definiowanie punktu końcowego:
ctx.lineTo(200, 100);
// Rysowanie:
ctx.stroke();

Spróbuj sam

Rysowanie linii na kanwie Canvas

Rysowanie linii używa ścieżki na kanwie:

Metoda

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

Metoda moveTo() definiuje początek linii. Nie rysuje nic, tylko ustawia punkt początkowy.

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

Metoda stroke() rysuje linię. Domyślny kolor linii to czarny.

Atrybut lineWidth

Atrybut lineWidth definiuje szerokość linii używaną do rysowania na kanwie.

Musisz ustawić to przed wywołaniem metody stroke().

实例

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.stroke();

Spróbuj sam

Atrybut strokeStyle

Atrybut strokeStyle definiuje styl używany do rysowania na kanwie.

Musisz ustawić to przed wywołaniem metody stroke().

实例

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.strokeStyle = "red";
ctx.stroke();

Spróbuj sam

Atrybut lineCap

Atrybut lineCap definiuje styl końca linii (butt, round lub square).

Domyślnie jest square (kwadratowy).

Musisz ustawić to przed wywołaniem metody stroke().

实例

ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(175,75);
ctx.lineWidth = 10;
ctx.lineCap = "round";
ctx.stroke();

Spróbuj sam

Zobacz również:

Pełne podręcznik referencyjny Canvas CodeW3C.com