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.
Listing
var cv = document.getElementById("canvas");
var ctx = cv.getContext("2d");
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(300, 250);
ctx.stroke();