HTML Academy · Lektion

Rechtecke und Pfade zeichnen

Zeichnen Sie Formen mit fillRect, strokeRect und Pfadbefehlen

Rechtecke und Pfade zeichnen ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Canvas einrichten

Das Element <canvas> benötigt explizite width- und height-Attribute für die Pixelabmessungen. Rufen Sie den 2D-Kontext ab: const ctx = canvas.getContext("2d"). Alle Zeichenoperationen verwenden dieses Kontextobjekt.

<canvas id="c" width="800" height="600"></canvas>
const ctx = document.getElementById("c").getContext("2d");

fillRect und strokeRect

Zeichnen Sie Rechtecke ohne Pfade: ctx.fillRect(x, y, width, height) füllt ein ausgefülltes Rechteck. ctx.strokeRect(x, y, width, height) zeichnet den Umriss. Setzen Sie ctx.fillStyle und ctx.strokeStyle vor dem Zeichnen.

ctx.fillStyle = "#3b82f6";
ctx.fillRect(50, 50, 200, 100);
ctx.strokeStyle = "#1e3a8a";
ctx.lineWidth = 3;
ctx.strokeRect(50, 50, 200, 100);

clearRect zum Löschen

ctx.clearRect(x, y, width, height) löscht Pixel und macht sie transparent. Verwenden Sie es, um Bereiche vor dem erneuten Zeichnen zu löschen – unerlässlich für Animationen: Löschen Sie das Canvas und zeichnen Sie anschließend in jedem Frame alles an den neuen Positionen erneut.

Pfadgrundlagen

Pfade definieren Formen. Beginnen Sie: ctx.beginPath(). Bewegen Sie den Zeichenpunkt zum Start: ctx.moveTo(x, y). Zeichnen Sie Linien: ctx.lineTo(x, y). Schließen Sie den Pfad: ctx.closePath(). Rendern Sie ihn: ctx.fill() oder ctx.stroke().

Linien zeichnen

Ein Dreieck: beginPath → moveTo(100,50) → lineTo(200,200) → lineTo(0,200) → closePath → stroke(). closePath zeichnet das letzte Segment automatisch zurück zum Startpunkt – Sie müssen die erste Koordinate nicht wiederholen.

Bogen und Kreis

ctx.arc(cx, cy, radius, startAngle, endAngle). Ein vollständiger Kreis: ctx.arc(100, 100, 50, 0, Math.PI * 2). Winkel werden im Bogenmaß angegeben. 0 entspricht rechts (3-Uhr-Position); Math.PI entspricht links (9-Uhr-Position).

Bezier-Kurven

ctx.quadraticCurveTo(cpx, cpy, x, y) zeichnet eine quadratische Bezier-Kurve mit einem Kontrollpunkt. ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) zeichnet eine kubische Bezier-Kurve mit zwei Kontrollpunkten für geschmeidige Kurven.

Füllstile

fillStyle akzeptiert Farbangaben als Strings, lineare Verläufe (ctx.createLinearGradient()), radiale Verläufe (ctx.createRadialGradient()) und Muster (ctx.createPattern(image, repeat)). Verwenden Sie komplexe Füllungen anstelle von Volltonfarben für ausdrucksstarke visuelle Effekte.

Linienstile

Steuern Sie das Aussehen von Linien: ctx.lineWidth (Pixelbreite), ctx.lineCap ("butt", "round", "square"), ctx.lineJoin ("miter", "round", "bevel") und ctx.setLineDash([5, 3]) für gestrichelte Linien mit abwechselnden Längen.

Speichern und Wiederherstellen

ctx.save() legt den aktuellen Zustand (fillStyle, strokeStyle, lineWidth, transform, clip) auf einem Stack ab. ctx.restore() nimmt ihn wieder vom Stack. Umschließen Sie komplexe Zeichenoperationen mit save/restore, damit Stile nicht zwischen unabhängigen Zeichenoperationen übernommen werden.

Koordinatensystem

Der Ursprung des Canvas (0,0) befindet sich in der oberen linken Ecke. X nimmt nach rechts zu, Y nach unten. Transformationen (translate, rotate, scale) ändern das Koordinatensystem und ermöglichen das Zeichnen relativ zu einem lokalen Ursprung, ohne absolute Positionen manuell berechnen zu müssen.

Wissensprüfung

Was bewirkt ctx.beginPath(), bevor Sie einen Pfad zeichnen?

Zusammenfassung

Beim 2D-Zeichnen mit Canvas werden Kontextmethoden für Rechtecke (fillRect, strokeRect), Pfade (beginPath, moveTo, lineTo, arc, bezierCurveTo), Stile (fillStyle, strokeStyle, lineWidth) und die Zustandsverwaltung (save/restore) verwendet. Wenn Sie diese Grundbausteine beherrschen, können Sie aus einfachen Elementen komplexe Grafiken erstellen.

Häufig gestellte Fragen

Ist die Lektion „Rechtecke und Pfade zeichnen“ kostenlos?

Ja — der vollständige Text von „Rechtecke und Pfade zeichnen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Rechtecke und Pfade zeichnen“?

Zeichnen Sie Formen mit fillRect, strokeRect und Pfadbefehlen Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um HTML Academy zu starten?

Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Rechtecke und Pfade zeichnen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?

Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu HTML Academy