HTML-Canvas-Koordinaten

Canvas-Koordinaten

Das HTML-Canvas ist ein zweidimensionales Gitter.

Die oberen linken Koordinaten des Canvas sind (0,0).

Im vorherigen Kapitel haben wir die Methode verwendet: fillRect(0,0,150,75).

Das bedeutet: Beginnen Sie mit dem Zeichnen eines 150x75 Pixel großen Rechtecks vom linken oberen Ecke (0,0) aus.

Koordinatenbeispiel

Bewegen Sie den Mauszeiger über das obige Rechteck, um die x- und y-Koordinaten anzuzeigen:

Zeichnen Sie eine Linie

Um auf dem Canvas eine Linie zu zeichnen, verwenden Sie die folgenden Methoden:

• moveTo(x,y) - Definieren Sie den Anfang der Linie
• lineTo(x,y) - Definieren Sie das Ende der Linie

Um tatsächlich eine Linie zu zeichnen, müssen Sie eine der "Farbmethoden" verwenden, z.B. stroke().

Beispiel

Definieren Sie den Startpunkt an der Position (0,0) und den Endpunkt an der Position (200,100). Anschließend wird die stroke()-Methode verwendet, um tatsächlich die Linie zu zeichnen:

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

Versuchen Sie es selbst

Zeichnen Sie einen Kreis

Um auf dem Canvas einen Kreis zu zeichnen, verwenden Sie die folgenden Methoden:

• beginPath() - Beginnen Sie einen Pfad
• arc(x,y,r,startangle,endangle) - Erstellen Sie einen Kreiszug/Kreis

Um mit arc() einen Kreis zu erstellen: 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 Zentrums des Kreises. Der r-Parameter definiert den Radius des Kreises.

Beispiel

Mit dem arc()-Verfahren wird ein Kreis definiert. Anschließend wird der Kreis mit der stroke()-Methode tatsächlich gezeichnet:

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

Versuchen Sie es selbst

Weitere Informationen:

Vollständiges Canvas-Referenzhandbuch von CodeW3C.com