Canvas-Koordinaten

Das HTML-Canvas-Element ist ein leistungsstarkes Element in HTML5, das es ermöglicht, Grafiken auf einer Webseite mit JavaScript zu erstellen und zu manipulieren. Das Canvas-Element bietet eine zweidimensionale Zeichenfläche, die man sich als Raster oder Koordinatensystem vorstellen kann, dessen obere linke Ecke die Koordinaten (0,0) hat. Die X-Achse verläuft horizontal nach rechts und nimmt in diese Richtung zu, die Y-Achse verläuft vertikal nach unten und nimmt in diese Richtung zu. Jeder Punkt im Canvas wird durch ein Koordinatenpaar (x, y) dargestellt, das seine Position innerhalb des Rasters definiert.

Eine Linie zeichnen

Die folgenden Methoden werden verwendet, um eine gerade Linie auf einem Canvas zu zeichnen:

moveTo(x,y), gibt den Startpunkt der Linie an
lineTo(x,y), gibt den Endpunkt der Linie an

Verwenden Sie eine der „Tinten“-Methoden, um eine Linie zu zeichnen, z. B. stroke().

Beispiel für das HTML `<canvas>`-Element zum Zeichnen einer Linie:

Beispiel für das HTML <canvas>-Element zum Zeichnen einer Linie

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas width="300" height="150" style="border:1px solid #cccccc;" id="canvasExample">
      Your browser does not support the HTML5 canvas tag.
    </canvas>
    <script>
      var c = document.getElementById("canvasExample");
      var ctx = c.getContext("2d");
      // Starting point (0,0) is the top-left corner
      ctx.moveTo(0, 0);
      // Ending point (300,150) matches the canvas width and height
      ctx.lineTo(300, 150);
      ctx.strokeStyle = '#359900';
      ctx.stroke();
    </script>
  </body>
</html>

Try it Yourself »

Im obigen Beispiel haben wir den Start- und Endpunkt der Linie definiert und die Methode stroke() zum Zeichnen verwendet.

Einen Kreis zeichnen

Die folgenden Methoden werden verwendet, um einen Kreis auf einem Canvas zu zeichnen:

beginPath(), startet einen Pfad
arc(x,y,r,startangle,endangle), erstellt einen Bogen/eine Kurve. Wenn Sie einen Kreis mit arc() erstellen möchten: Setzen Sie den Startwinkel auf 0 und den Endwinkel auf 2 * Math.PI. Die Parameter x und y geben die x- und y-Koordinaten des Kreismittelpunkts an. Der Parameter r gibt den Radius des Kreises an.

Beispiel für das HTML `<canvas>`-Element zum Zeichnen eines Kreises:

Beispiel für das HTML <canvas>-Element zum Zeichnen eines Kreises:

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="exampleCanvas" width="250" height="200" style="border:1px solid #dddddd;">
      The canvas tag is not supported by your browser.
    </canvas>
    <script>
      var canvas = document.getElementById("exampleCanvas");
      var ctx = canvas.getContext("2d");
      ctx.beginPath();
      // Center at (125, 95), radius 70. 125 is half of the 250 width.
      ctx.arc(125, 95, 70, 0, 2 * Math.PI);
      ctx.strokeStyle = '#1c87c9';
      ctx.closePath();
      ctx.stroke();
    </script>
  </body>
</html>

Try it Yourself »

Im obigen Beispiel haben wir einen Kreis mit der Methode arc() definiert und die Methode stroke() zum Zeichnen des Kreises verwendet.

Praxis

Welche Eigenschaften haben die Koordinaten des HTML5 <canvas>-Elements?

Es handelt sich um ein zweidimensionales Rastersystem.Die linke obere Ecke des Canvas entspricht den Koordinaten (0, 0).Der x-Wert (horizontal) nimmt nach links hin zu.Der y-Wert (vertikal) nimmt nach unten hin zu.Es handelt sich um ein dreidimensionales Rastersystem.

Canvas-Koordinaten ​

Eine Linie zeichnen ​

Beispiel für das HTML <canvas>-Element zum Zeichnen einer Linie: ​

Einen Kreis zeichnen ​