JavaScript Academy · Lektion

Formen und Pfade zeichnen

Rendern Sie Rechtecke, Bögen und benutzerdefinierte Pfade.

Formen und Pfade zeichnen ist eine kostenlose JavaScript 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 JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Zuerst Rechtecke

Für Rechtecke gibt es spezielle Kurzbefehle: fillRect, strokeRect und clearRect. Jeder erwartet (x, y, width, height).

ctx.fillStyle = "#2ecc71";
ctx.fillRect(10, 10, 120, 60);
ctx.strokeStyle = "#000";
ctx.strokeRect(10, 10, 120, 60);

Einen Pfad beginnen

Für alles außer Rechtecken erstellen Sie einen Pfad. Rufen Sie beginPath() auf, um neu zu beginnen, fügen Sie Segmente hinzu und rufen Sie anschließend stroke() oder fill() auf.

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(180, 20);
ctx.stroke();

moveTo und lineTo

moveTo(x, y) hebt den Zeichenstift an und platziert ihn, ohne zu zeichnen. lineTo(x, y) zeichnet eine gerade Linie vom aktuellen Punkt zum neuen Punkt.

ctx.beginPath();
ctx.moveTo(30, 30);
ctx.lineTo(120, 90);
ctx.lineTo(30, 90);
ctx.stroke();

Einen Pfad schließen

closePath() zeichnet eine Linie zurück zum Ausgangspunkt und vervollständigt so die Kontur. Das ist nützlich für Polygone.

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(100, 130);
ctx.closePath();
ctx.stroke();

Formen füllen

fill() füllt das Innere des aktuellen Pfads mit fillStyle. Sie können denselben Pfad füllen und mit einer Kontur versehen.

ctx.beginPath();
ctx.moveTo(100, 20);
ctx.lineTo(160, 120);
ctx.lineTo(40, 120);
ctx.closePath();
ctx.fillStyle = "gold";
ctx.fill();
ctx.stroke();

Kreise mit arc zeichnen

arc(x, y, radius, startAngle, endAngle) zeichnet einen Kreisbogen. Winkel werden im Bogenmaß angegeben. Ein vollständiger Kreis reicht von 0 bis 2 * Math.PI.

ctx.beginPath();
ctx.arc(100, 75, 50, 0, Math.PI * 2);
ctx.fillStyle = "#9b59b6";
ctx.fill();

Teilbögen und Tortenstücke

Verwenden Sie einen Start- und einen Endwinkel, um einen Sektor zu zeichnen. Kombinieren Sie dies mit lineTo zum Mittelpunkt, um ein Tortenstück zu erhalten.

ctx.beginPath();
ctx.moveTo(100, 75);
ctx.arc(100, 75, 50, 0, Math.PI / 2);
ctx.closePath();
ctx.fill();

Quadratische und Bézier-Kurven

quadraticCurveTo(cpx, cpy, x, y) und bezierCurveTo(...) zeichnen mithilfe von Kontrollpunkten glatte Kurven.

ctx.beginPath();
ctx.moveTo(20, 100);
ctx.quadraticCurveTo(100, 10, 180, 100);
ctx.stroke();

Linien formatieren

Steuern Sie das Aussehen von Linien mit lineWidth, lineCap (butt/round/square), lineJoin (miter/round/bevel) und setLineDash.

ctx.lineWidth = 6;
ctx.lineCap = "round";
ctx.setLineDash([12, 6]);
ctx.beginPath();
ctx.moveTo(20, 60);
ctx.lineTo(200, 60);
ctx.stroke();

Füllregeln

fill() akzeptiert "nonzero" (Standard) oder "evenodd", um festzulegen, wie sich überschneidende Teilpfade gefüllt werden – praktisch für Formen mit Löchern.

ctx.beginPath();
ctx.arc(100, 75, 50, 0, Math.PI * 2);
ctx.arc(100, 75, 25, 0, Math.PI * 2);
ctx.fill("evenodd"); // donut

Farbverläufe als Füllungen

Erstellen Sie mit createLinearGradient einen Farbverlauf, fügen Sie Farbstopps hinzu und weisen Sie ihn anschließend fillStyle zu.

const g = ctx.createLinearGradient(0, 0, 200, 0);
g.addColorStop(0, "red");
g.addColorStop(1, "blue");
ctx.fillStyle = g;
ctx.fillRect(0, 0, 200, 100);

Kurzer Test

Testen Sie Ihr Wissen über Pfade.

Zusammenfassung: Formen und Pfade

Sie können jetzt Rechtecke zeichnen, mit beginPath/moveTo/lineTo/closePath Pfade erstellen, mit arc Kreise zeichnen, Kurven hinzufügen, Linien formatieren und mit Farben oder Farbverläufen füllen. Als Nächstes geht es um Bilder und Text.

Häufig gestellte Fragen

Ist die Lektion „Formen und Pfade zeichnen“ kostenlos?

Ja — der vollständige Text von „Formen 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 JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Formen und Pfade zeichnen“?

Rendern Sie Rechtecke, Bögen und benutzerdefinierte Pfade. Du übst JavaScript 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 JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript 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 „Formen 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 JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript 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 JavaScript Academy