Canvas API

Das <canvas>-Element definiert ein Rasterbereich in der HTML-Seite.

Das Canvas API ermöglicht es JavaScript, auf dem Canvas Grafiken zu zeichnen.

Das Canvas API kann Formen, Linien, Kurven, Rechtecke, Text und Bilder sowie Farben, Rotation, Transparenz und andere Pixeloperationen zeichnen.

Canvas in HTML hinzufügen

Sie können das <canvas>-Tag verwenden, um das canvas-Element an jeder beliebigen Stelle in der HTML-Seite hinzuzufügen:

Beispiel

<canvas id="myCanvas" width="300" height="150"></canvas>

Versuchen Sie es selbst

Wie man auf das Canvas-Element zugreift

Sie können den HTML DOM-Methode getElementById() verwenden, um auf das <canvas>-Element zuzugreifen:

const myCanvas = document.getElementById("myCanvas");

Um auf dem Bildschirm zu zeichnen, müssen Sie ein 2D-Context-Objekt erstellen:

const ctx = myCanvas.getContext("2d");

Notizen

Das HTML <canvas>-Element hat selbst keine Zeichnungsfunktion.

Sie müssen JavaScript verwenden, um jede Art von Grafik zu zeichnen.

Die Methode getContext() gibt ein Objekt zurück, das mit Zeichnungswerkzeugen (Methoden) ausgestattet ist.

Zeichnen auf dem Bildschirm

Nachdem Sie den 2D-Context-Objekt erstellt haben, können Sie auf dem Bildschirm zeichnen.

Mit dem fillRect()-Verfahren wird unten ein schwarzes Rechteck gezeichnet, dessen oberer linker Eckpunkt sich in der Position 20,20 befindet. Das Rechteck hat eine Breite von 150 Pixel und eine Höhe von 100 Pixeln:

Beispiel

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillRect(20, 20, 150, 100);

Versuchen Sie es selbst

Verwenden Sie Farben

Die fillStyle-Eigenschaft setzt die Füllfarbe des Zeichnungselements fest:

Beispiel

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

Versuchen Sie es selbst

Sie können auch die Methode document.createElement() verwenden, um ein neues <canvas>-Element zu erstellen und dieses Element zur bestehenden HTML-Seite hinzuzufügen:

Beispiel

const myCanvas = document.createElement("canvas");
document.body.appendChild(myCanvas);
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

Versuchen Sie es selbst

路径

Eine gängige Methode zum Zeichnen auf dem Bildschirm ist:

1. Pfad beginnen - beginPath()
2. Zu einem Punkt bewegen - moveTo()
3. Im Pfad zeichnen - lineTo()
4. Pfad zeichnen - stroke()

Beispiel

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

Versuchen Sie es selbst