Koordynaty HTML Canvas

Współrzędne płótna

HTML canvas to dwuwymiarowa siatka.

Lewy górny róg płótna ma współrzędne (0,0).

W poprzednim rozdziale użyliśmy metody: fillRect(0,0,150,75).

To oznacza: rysuj prostokąt 150x75 pikseli od góry lewego rogu (0,0).

Przykład współrzędnych

Umieść kursor nad poniższym prostokątem, aby zobaczyć jego współrzędne x i y:

Narysuj linię

Aby narysować linię na płótnie, użyj następujących metod:

• moveTo(x,y) - zdefiniuj początek linii
• lineTo(x,y) - zdefiniuj koniec linii

Aby rzeczywiście narysować linię, musisz użyć jednej z metod "farby", np. stroke().

Przykład

Zdefiniuj punkt startowy w pozycji (0,0), punkt końcowy w pozycji (200,100). Następnie użyj metody stroke() do rzeczywistego rysowania linii:

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

Spróbuj sam

Narysuj okrąg

Aby narysować okrąg na płótnie, użyj następujących metod:

• beginPath() - rozpoczynanie ścieżki
• arc(x,y,r,startangle,endangle) - utwórz łuk/krzywe

Aby użyć metody arc() do stworzenia okręgu: ustaw kąt początkowy na 0, kąt końcowy na 2 * Math.PI. Parametry x i y definiują współrzędne x i y środka okręgu. Parametr r definiuje promień okręgu.

Przykład

Używając metody arc() zdefiniuj okrąg. Następnie użyj metody stroke() do rzeczywistego rysowania okręgu:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();

Spróbuj sam

Zobacz również:

Pełne podręcznik Canvas CodeW3C.com