Bilder 🖼️
Bisher haben wir alles selbst gemalt — Rechtecke, Kreise, Text. Für ein Spiel
willst du aber oft fertige Bilder zeichnen: Spielfiguren, Karten, Symbole.
Genau dafür gibt es die Funktion drawPicture:
drawPicture(ctx, "smiley", 50, 50)
drawPicture gehört zu den Hilfsfunktionen, die dir im Spiele-Template
schon mitgeliefert werden. Du musst sie nicht selbst schreiben — du benutzt
sie einfach. Der Aufbau ist immer:
drawPicture(ctx, name, ...position)
ctx— dein Pinsel (wie immer)name— welches Bild gezeichnet werden soll- danach die Position (und optional die Größe) auf dem Canvas
💡 In diesem Kapitel stehen dir ein paar fertige Bilder zur Verfügung:
"smiley","herz","stern","baum"und"haus". Im echten Template kannst du auch eigene Bilddateien verwenden — der Aufruf bleibt gleich.
Die verfügbaren Bilder
Schauen wir uns zuerst an, was es überhaupt gibt. Wir laufen mit einer Schleife durch die Namen und zeichnen jedes Bild:
Position: wohin kommt das Bild?
Die zwei Zahlen nach dem Namen sind die obere linke Ecke des Bildes —
genau wie bei fillRect:
drawPicture(ctx, "smiley", x, y)
Ohne Größenangabe wird das Bild in seiner Originalgröße (hier 100 × 100)
gezeichnet. Die rote Markierung zeigt den Punkt (x, y):
Größe: zwei weitere Zahlen
Hängst du zwei weitere Zahlen an, bestimmst du Breite und Höhe — das Bild wird passend gestreckt oder gestaucht:
drawPicture(ctx, "stern", x, y, breite, höhe)
Dreimal derselbe Stern, nur in unterschiedlichen Größen:
Bilder in einer Schleife
Richtig praktisch wird es, wenn du Bilder mit einer Schleife wiederholst.
So zeichnest du z. B. einen ganzen Wald aus einem einzigen baum-Bild:
Profi-Trick: einen Ausschnitt zeichnen 🔬
Es gibt noch eine längere Form mit acht Zahlen. Damit schneidest du einen rechteckigen Ausschnitt aus dem Bild aus und zeichnest nur diesen:
drawPicture(ctx, name, sx, sy, sBreite, sHöhe, x, y, breite, höhe)
// └─ Ausschnitt im Bild ─┘ └─ Ziel auf dem Canvas ─┘
Die ersten vier Zahlen sagen „nimm diesen Teil des Bildes", die letzten vier „und male ihn hierhin". So kannst du z. B. nur das Gesicht des Smileys (die obere Hälfte) groß herauszoomen:
Übung 1 🎯 — Ein kleiner Garten
Zeichne eine kleine Szene mit drawPicture:
- mindestens 3 Bäume (
"baum") - ein Haus (
"haus")
Wo genau du sie platzierst und wie groß sie sind, ist dir überlassen — Hauptsache, es sieht nach einem Garten aus. 🌳🏠🌳
Übung 2 🎯 — Derselbe Stern in drei Größen
Zeichne denselben Stern ("stern") dreimal nebeneinander — jedes Mal
deutlich größer als das vorige (z. B. 40, 80 und 120 Pixel breit). Nutze für
jeden Stern die Form drawPicture(ctx, "stern", x, y, breite, höhe).
Geschafft! 🎉
Du kannst jetzt mit drawPicture fertige Bilder auf das Canvas zeichnen —
an einer beliebigen Position, in jeder Größe, und sogar nur einen
Ausschnitt. Damit wird aus deinen Grafiken im Handumdrehen ein echtes
Spielbrett.
Im nächsten Kapitel machen wir das Canvas interaktiv: Wir lassen den Spieler darauf klicken.
→ Weiter zu Klicks