HTML-Canvas- Koordinaten
Leinwandkoordinaten
Der HTML-Canvas ist ein zweidimensionales Raster.
Die obere linke Ecke der Leinwand hat die Koordinaten (0,0)
Im vorherigen Kapitel haben Sie diese Methode verwendet gesehen: fillRect(0,0,150,75).
Das bedeutet: Beginnen Sie in der oberen linken Ecke (0,0) und zeichnen Sie ein 150x75 Pixel großes Rechteck.
Koordinaten Beispiel
Bewegen Sie den Mauszeiger über das Rechteck unten, um seine x- und y-Koordinaten anzuzeigen:
Zeichne eine Linie
Verwenden Sie die folgenden Methoden, um eine gerade Linie auf einer Leinwand zu zeichnen:
- moveTo( x,y ) - definiert den Startpunkt der Linie
- lineTo( x,y ) - definiert den Endpunkt der Linie
Um die Linie tatsächlich zu zeichnen, müssen Sie eine der „Tinten“-Methoden verwenden, wie etwa stroke().
Beispiel
Definieren Sie einen Startpunkt an Position (0,0) und einen Endpunkt an Position (200,100). Verwenden Sie dann die Methode stroke(), um die Linie tatsächlich zu zeichnen:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
Zeichne einen Kreis
Verwenden Sie die folgenden Methoden, um einen Kreis auf einer Leinwand zu zeichnen:
- beginPath() - beginnt einen Pfad
- arc(x,y,r,startangle,endangle) - erstellt einen Bogen/eine Kurve. So erstellen Sie einen Kreis mit arc(): Setzen Sie den Startwinkel auf 0 und den Endwinkel auf 2*Math.PI. Die x- und y-Parameter definieren die x- und y-Koordinaten des Kreismittelpunkts. Der Parameter r definiert den Radius des Kreises.
Beispiel
Definieren Sie einen Kreis mit der Methode arc(). Verwenden Sie dann die Methode stroke(), um den Kreis tatsächlich zu zeichnen:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();