Rysowanie linii (HTML5 canvas)

Rysowanie linii

Rysowanie odbywa się w kontekście na ścieżkach. Istnieje jedna domyślna ścieżka na której możemy rysować.

Nową ścieżkę dodajemy instrukcją ctx.beginPath(). Rozpoczęcie nowej ścieżki zakańcza poprzednią ścieżkę.

Aby narysować linię 'głowicę rysującą’ przenosimy do punktu początkowego linii używając polecenia moveTo(), a następnie kreślimy linię od tego punktu używając polecenia lineTo().

Linia jest rysowana w pamięci. Nie jest jeszcze widoczna.

Aby uwidocznić linię wydajemy polecenie stroke(), które służy do rysowania konturów.

Ponieważ nie ustawiliśmy dla kontekstu żadnych właściwości użyte są domyślne właściwości:

• kolor – 'black’ (czarny)
• szerokość (grubość) linii – '1px’ (1 piksel)

Sposób ich użycia podamy dalej w tekście.

Zawartość możesz zobaczyć w
przeglądarce obsługującej element <canvas>
z kontekstem "2d"

Listing

	var cv = document.getElementById("canvas");
	var ctx = cv.getContext("2d");
	ctx.beginPath();
	ctx.moveTo(100, 100);
	ctx.lineTo(300, 250);
	ctx.stroke();