Koordinatensystem 📐
Bevor wir anfangen zu zeichnen, müssen wir verstehen, wie Computer Positionen auf dem Bildschirm beschreiben. Computer arbeiten mit einem Koordinatensystem — ähnlich wie du es aus der Mathematik kennst.
Computer denken zweidimensional in zwei Achsen:
- x-Achse: horizontal (von links nach rechts)
- y-Achse: vertikal (von oben nach unten)
⚠️ Vorsicht: In der Mathematik liegt der Nullpunkt
(0, 0)meist unten links und die y-Achse zeigt nach oben. Bei Computern ist es andersherum: der Nullpunkt(0, 0)ist in der oberen linken Ecke, und die y-Achse zeigt nach unten.
Beispiele
Schauen wir uns ein paar Positionen an:
| Name | Koordinaten | Position auf dem Canvas |
|---|---|---|
| A | (0, 0) |
Ganz oben links |
| B | (100, 0) |
100 Pixel von links, ganz oben |
| C | (0, 100) |
Ganz links, 100 Pixel von oben |
| D | (200, 150) |
200 Pixel von links, 150 Pixel von oben |
| E | (275, 280) |
275 Pixel von links, 280 Pixel von oben |
Hier siehst du diese fünf Punkte direkt auf dem Canvas eingezeichnet. Spiel mit
den Koordinaten in der points-Liste herum und beobachte, wie sich die Punkte
verschieben:
Jetzt, wo du weißt, wo (0, 0) liegt und in welche Richtung die Achsen
zeigen, können wir anfangen zu zeichnen.
Weiter geht’s mit der einfachsten Form: Rechtecke →