W3docs
de
Anmelden

Canvas-Zeichnung

On this page, you can find useful information about the HTML <canvas> element, as well as to learn to draw with canvas step by step with our code examples.

JavaScript wird verwendet, um auf der Canvas zu zeichnen. Dies geschieht Schritt für Schritt.

1. Canvas-Element finden

Um das Canvas-Element zu finden, verwenden Sie die HTML-DOM-Methode: getElementById():

Canvas-Zeichnung

var canvas=document.getElementById("canvas");

2. Zeichenobjekt erstellen

Verwenden Sie die getContext()-Methode, um einen Zeichenkontext zu erhalten, der Eigenschaften und Methoden bereitstellt:

Canvas-Zeichnung

var ctx = canvas.getContext("2d");

3. Auf das Canvas-Element zeichnen

Jetzt können Sie auf der Canvas zeichnen. Die Eigenschaft fillStyle kann eine CSS-Farbe, ein Muster oder ein Farbverlauf sein.

Canvas-Zeichnung

ctx.fillStyle = "#1c87c9";

Sie können auch die fillRect(x, y, width, height)-Methode verwenden, um ein gefülltes Rechteck auf der Canvas zu zeichnen. Die Parameter geben die x- und y-Koordinaten der oberen linken Ecke an, gefolgt von Breite und Höhe:

Canvas-Zeichnung

ctx.fillRect(0, 0, 230, 130);

Beispiel für das HTML <canvas>-Tag:

Beispiel für das HTML <canvas>-Tag

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="canvas" width="250" height="150" style="border:1px solid #dddddd;">
      The canvas tag is not supported by your browser.
    </canvas>
    <script>
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      ctx.fillStyle = "#1c87c9";
      ctx.fillRect(0, 0, 230, 130)
    </script>
  </body>
</html>
Probier es selbst »

Praxis

Übung

Welche Elemente werden benötigt, um auf einer HTML-Canvas zu zeichnen?