Technologie

Wie zeichne ich ein Rechteck mit JavaScript im Canvas-Element?

Melden
  1. Einführung in das Zeichnen eines Rechtecks im Canvas
  2. HTML-Grundgerüst mit Canvas-Element
  3. JavaScript: Rechteck zeichnen
  4. Kompletter HTML-Code mit eingebettetem JavaScript

Einführung in das Zeichnen eines Rechtecks im Canvas

Das HTML5 Canvas-Element ermöglicht es dir, dynamische Grafiken mithilfe von JavaScript zu erzeugen. Um ein Rechteck zu zeichnen, benötigst du zunächst eine Leinwand, in der die Grafik dargestellt wird. Anschließend holst du dir den sogenannten Zeichenkontext, eine Schnittstelle, über die du verschiedene Formen und Linien auf der Leinwand malen kannst.

HTML-Grundgerüst mit Canvas-Element

Zu Beginn fügst du in deinem HTML-Dokument das Canvas-Element ein. Dabei gibst du ihm eine feste Größe, z.B. 400 Pixel in der Breite und 300 Pixel in der Höhe. Diese Größenangaben definieren die tatsächliche Zeichnungsfläche, wichtig für saubere Grafiken.

<canvas id="meinCanvas" width="400" height="300"></canvas>

Das Attribut id ist wichtig, damit du das Element später per JavaScript ansprechen kannst.

JavaScript: Rechteck zeichnen

Um auf dem Canvas ein Rechteck zu zeichnen, greifst du auf das HTMLCanvasElement zu und erhältst den 2D-Zeichenkontext, mit dem du entweder gefüllte oder nur umrissene Rechtecke zeichnen kannst.

Hier ein vollständiges Beispiel:

const canvas = document.getElementById(meinCanvas);const ctx = canvas.getContext(2d);// Ein gefülltes Rechteck zeichnen:// ctx.fillRect(x, y, breite, höhe);ctx.fillStyle = #007BFF; // Farbe für das Rechteck (blau)ctx.fillRect(50, 50, 200, 100);// Ein Rechteck nur mit Umriss zeichnen:// ctx.strokeRect(x, y, breite, höhe);ctx.strokeStyle = #FF5733; // Farbe für den Umriss (rot)ctx.lineWidth = 4; // Linienbreitectx.strokeRect(270, 50, 100, 150);

In diesem Beispiel zeichnet fillRect ein blaues, gefülltes Rechteck an der Position (50, 50) mit einer Breite von 200 Pixeln und einer Höhe von 100 Pixeln. Direkt daneben zeichnet strokeRect ein rotes Rechteck mit einem sichtbaren Umriss, aber ohne Füllung.

Kompletter HTML-Code mit eingebettetem JavaScript

Hier findest du den Gesamtcode, den du einfach in eine HTML-Datei speichern und im Browser öffnen kannst, um die Rechtecke zu sehen.

<!DOCTYPE html><html lang="de"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Rechteck auf Canvas zeichnen</title> <style> canvas { border: 1px solid #ccc; background-color: #fff; } </style></head><body><h2>Canvas Rechtecke mit JavaScript</h2><canvas id="meinCanvas" width="400" height="300"></canvas><script>const canvas = document.getElementById(meinCanvas);const ctx = canvas.getContext(2d);// Gefülltes Rechteckctx.fillStyle = #007BFF;ctx.fillRect(50, 50, 200, 100);// Rechteck mit Umrissctx.strokeStyle = #FF5733;ctx.lineWidth = 4;ctx.strokeRect(270, 50, 100, 150);</script></body></html>

Je nachdem, was du benötigst, kannst du entweder das gefüllte Rechteck nutzen oder nur den Umriss, oder beides nebeneinander, wie in diesem Beispiel. Das Canvas-Element bietet außerdem noch viele weitere Möglichkeiten zur Grafikbearbeitung — von Linien über Kreise bis zu komplexen Animationen.

0

Kommentare