Andere Formen ⚪

Rechtecke sind ein guter Start, aber für die meisten Grafiken brauchen wir mehr: Kreise, Linien, Dreiecke. Dafür gibt es in Canvas das Konzept der Pfade (Paths).

Ein Pfad ist wie eine Linie, die du mit einem Stift zeichnest, ohne ihn abzusetzen:

ctx.beginPath()   // 1. Neuen Pfad starten
// ... Pfad zeichnen (arc, moveTo, lineTo, ...) ...
ctx.fill()        // 3a. Pfad ausfüllen
ctx.stroke()      // 3b. Pfad als Umriss zeichnen

📌 beginPath() startet immer einen neuen Pfad. Du kannst danach nur fill(), nur stroke() oder beides verwenden.

Kreise zeichnen

Kreise (und Kreisbögen) zeichnet man mit arc():

ctx.arc(x, y, radius, startWinkel, endWinkel)
  • x, y: Mittelpunkt des Kreises
  • radius: Radius (Abstand vom Mittelpunkt zum Rand)
  • startWinkel, endWinkel: in Radiant (nicht Grad!)

Was sind Radianten?

  • 0 = 0° (rechts)
  • Math.PI / 2 = 90° (unten)
  • Math.PI = 180° (links)
  • 2 * Math.PI = 360° (voller Kreis)

⚠️ Die Reihenfolge von fill() und stroke() kann das Ergebnis beeinflussen — der zweite Aufruf malt über den ersten.

Linien zeichnen

  • moveTo(x, y): setzt den „Stift“ an eine Position (ohne zu zeichnen)
  • lineTo(x, y): zieht eine Linie von der aktuellen Position zu (x, y)

Mehrere verbundene Linien

Mehrere lineTo hintereinander ergeben einen Linienzug:

Geschlossene Form (Dreieck)

closePath() schließt den Pfad automatisch zum Startpunkt zurück — praktisch für gefüllte Formen wie ein Dreieck:

Linienbreite steuern

Mit lineWidth änderst du die Dicke von Linien und Umrissen (Standard: 1).

📌 lineWidth bleibt aktiv wie fillStyle und strokeStyle — setze es vor dem Zeichnen!

Übung 🎯 — Regenbogen

Ein arc muss kein voller Kreis sein! Du gibst Start- und Endwinkel an und zeichnest so nur einen Teil davon — einen Bogen. Genau das nutzen wir hier für einen Regenbogen aus mehreren farbigen Bögen.

Zeichne fünf Bögen übereinander, von außen nach innen:

  • Mittelpunkt: (160, 210)
  • Radien: 130, 112, 94, 76, 58 (jeder Bogen 18 kleiner)
  • Farben: rot, orange, gelb, grün, blau
  • Winkel: jeder Bogen geht von Math.PI bis 2 * Math.PI — das ist genau der obere Halbkreis (von links über oben nach rechts)
  • Linienbreite: 18

💡 Du brauchst kein fill und kein closePath — jeder Bogen ist eine einzelne Linie mit stroke(). Tipp: eine Schleife über ein Array aus [Farbe, Radius] spart viel Tipparbeit (wie im lineWidth-Beispiel oben).

Zielbild:

Geschafft! 🚀

Du kennst jetzt Pfade (beginPath / fill / stroke), Kreise (arc), Linien (moveTo / lineTo / closePath) und lineWidth.

Weiter geht’s mit Text →

← Zurück zur Canvas-Übersicht