Information Technology Reference
In-Depth Information
5.2 Rechtecke
Canvas verfügt über vier Methoden, um Rechtecke zu erstellen. Mit dreien da-
von wollen wir uns jetzt beschäftigen, die vierte wird uns später beim Thema
Pfade begegnen.
context.fillRect(x, y, w, h)
context.strokeRect(x, y, w, h)
context.clearRect(x, y, w, h)
Die Namen dieser Methoden sind selbsterklärend. So erzeugt
fillRect()
ein
gefülltes Rechteck,
strokeRect()
ein Rechteck mit Randlinie ohne Füllung und
clearRect()
ein Rechteck, das bestehenden Inhalt wie ein Radiergummi löscht.
Die Dimension des Rechtecks bestimmen vier numerische Parameter: Start-
punkt
x
/
y
, Breite
w
und Höhe
h
.
In Canvas liegt der Koordinatenursprungspunkt übrigens links oben, wodurch
x-Werte nach rechts und y-Werte nach unten größer werden.
Abbildung 5.3:
Das Canvas-Koordinatensystem
