Współrzędne płótna HTML
Współrzędne płótna
Kanwa HTML to dwuwymiarowa siatka.
Lewy górny róg płótna ma współrzędne (0,0)
W poprzednim rozdziale widziałeś tę metodę: fillRect(0,0,150,75).
Oznacza to: Zacznij od lewego górnego rogu (0,0) i narysuj prostokąt o wymiarach 150x75 pikseli.
Przykład współrzędnych
Najedź myszką na prostokąt poniżej, aby zobaczyć jego współrzędne x i y:
x
Y
Narysuj linię
Aby narysować linię prostą na płótnie, użyj następujących metod:
- moveTo( x,y ) - określa punkt początkowy linii
- lineTo( x,y ) - określa punkt końcowy linii
Aby faktycznie narysować linię, musisz użyć jednej z metod "ink", takich jak stroke().
Przykład
Zdefiniuj punkt początkowy na pozycji (0,0) i punkt końcowy na pozycji (200,100). Następnie użyj metody stroke(), aby narysować linię:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
Narysuj okrąg
Aby narysować okrąg na płótnie, użyj następujących metod:
- beginPath() - rozpoczyna ścieżkę
- arc(x,y,r,startangle,endangle) - tworzy łuk/krzywą. Aby utworzyć okrąg za pomocą arc(): Ustaw kąt początkowy na 0 i kąt końcowy na 2*Math.PI. Parametry x i y definiują współrzędne x i y środka okręgu. Parametr r określa promień okręgu.
Przykład
Zdefiniuj okrąg za pomocą metody arc(). Następnie użyj metody stroke(), aby narysować okrąg:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();