Wie ändere ich die Höhe eines Rechtecks im HTML-Canvas?
Das <canvas>-Element in HTML gibt uns die Möglichkeit, dynamisch und interaktiv Grafiken zu zeichnen. Um die Höhe eines Rechtecks auf dem Canvas zu ändern, müssen wir es neu zeichnen, da der Canvas eine Rastergraphik ist und keine einzelnen Elemente wie im DOM besitzt. Hier erkläre ich detailliert, wie man vorgeht.
Grundlage: Rechteck auf dem Canvas zeichnen
Um ein Rechteck auf dem Canvas zu zeichnen, verwenden wir die Methode fillRect(x, y, width, height). Hierbei definiert x und y die obere linke Ecke des Rechtecks, width die Breite und height die Höhe des Rechtecks.
Die Höhe dynamisch ändern
Da der Canvas keine Objektstruktur wie HTML-Elemente hat, kann man die Höhe eines Rechtecks nicht einfach ändern. Stattdessen muss das gesamte Canvas neu gezeichnet werden. Das bedeutet:
1. Den Canvas löschen oder mit clearRect überschreiben.
2. Das Rechteck mit der neuen Höhe erneut zeichnen.
Wir können diese Änderung über eine Benutzereingabe steuern, beispielsweise mit einem Eingabefeld, in das die gewünschte Höhe eingetragen wird.
Zusammenfassung
Die Höhe eines Rechtecks im HTML-Canvas wird über den Parameter height bei fillRect() bestimmt. Da der Canvas ein Bitmap ist, muss man den Zeichenbereich löschen und das Rechteck mit der neuen Höhe neu zeichnen, um die Änderung sichtbar zu machen. Dies kann man interaktiv mit Benutzereingaben steuern.