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 poprzenią ś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();
            

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *