You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
74 lines
4.9 KiB
74 lines
4.9 KiB
# Aufgabe: Erkunde die Canvas API
|
|
|
|
## Lernziele
|
|
|
|
Durch das Abschließen dieser Aufgabe werden Sie Ihr Verständnis der Grundlagen der Canvas API nachweisen und kreative Problemlösungen anwenden, um visuelle Elemente mit JavaScript und HTML5 Canvas zu erstellen.
|
|
|
|
## Anweisungen
|
|
|
|
Wählen Sie einen Aspekt der Canvas API, der Sie interessiert, und erstellen Sie ein fesselndes visuelles Projekt darum herum. Diese Aufgabe ermutigt Sie dazu, mit den von Ihnen erlernten Zeichenfunktionen zu experimentieren und etwas Einzigartiges zu erschaffen.
|
|
|
|
### Projektideen zur Inspiration
|
|
|
|
**Geometrische Muster:**
|
|
- **Erstellen** Sie eine Galaxie aus animierten funkelnden Sternen mit zufälligen Positionierungen
|
|
- **Entwerfen** Sie eine interessante Textur mit wiederholten geometrischen Formen
|
|
- **Bauen** Sie einen Kaleidoskop-Effekt mit rotierenden, farbenfrohen Mustern
|
|
|
|
**Interaktive Elemente:**
|
|
- **Entwickeln** Sie ein Zeichenwerkzeug, das auf Mausbewegungen reagiert
|
|
- **Implementieren** Sie Formen, die ihre Farbe beim Klicken ändern
|
|
- **Gestalten** Sie eine einfache Animationsschleife mit bewegten Elementen
|
|
|
|
**Spielbezogene Grafiken:**
|
|
- **Erstellen** Sie einen scrollenden Hintergrund für ein Weltraumspiel
|
|
- **Bauen** Sie Partikeleffekte wie Explosionen oder magische Zauber
|
|
- **Erstellen** Sie animierte Sprites mit mehreren Frames
|
|
|
|
### Entwicklungsrichtlinien
|
|
|
|
**Recherche und Inspiration:**
|
|
- **Durchstöbern** Sie CodePen nach kreativen Canvas-Beispielen (zur Inspiration, nicht zum Kopieren)
|
|
- **Studieren** Sie die [Canvas API Dokumentation](https://developer.mozilla.org/docs/Web/API/Canvas_API) für weitere Methoden
|
|
- **Experimentieren** Sie mit verschiedenen Zeichenfunktionen, Farben und Animationen
|
|
|
|
**Technische Anforderungen:**
|
|
- **Verwenden** Sie die korrekte Canvas-Einrichtung mit `getContext('2d')`
|
|
- **Fügen** Sie aussagekräftige Kommentare hinzu, die Ihren Ansatz erklären
|
|
- **Testen** Sie Ihren Code gründlich, um sicherzustellen, dass er ohne Fehler läuft
|
|
- **Nutzen** Sie moderne JavaScript-Syntax (const/let, Pfeilfunktionen)
|
|
|
|
**Kreativer Ausdruck:**
|
|
- **Konzentrieren** Sie sich auf eine Canvas API Funktion, aber erforschen Sie diese tiefgehend
|
|
- **Fügen** Sie Ihre eigene kreative Note hinzu, um das Projekt persönlich zu gestalten
|
|
- **Überlegen** Sie, wie Ihre Kreation Teil einer größeren Anwendung sein könnte
|
|
|
|
### Abgaberegeln
|
|
|
|
Reichen Sie Ihr fertiges Projekt als einzelne HTML-Datei mit eingebettetem CSS und JavaScript ein oder als separate Dateien in einem Ordner. Fügen Sie einen kurzen Kommentar bei, der Ihre kreativen Entscheidungen und die von Ihnen erforschten Canvas API Funktionen erläutert.
|
|
|
|
## Bewertungsraster
|
|
|
|
| Kriterien | Hervorragend | Akzeptabel | Verbesserungswürdig |
|
|
|----------|--------------|------------|---------------------|
|
|
| **Technische Umsetzung** | Canvas API kreativ mit mehreren Funktionen genutzt, Code läuft fehlerfrei, moderne JavaScript-Syntax angewendet | Canvas API korrekt genutzt, Code läuft mit kleinen Problemen, grundlegende Implementierung | Canvas API versucht, aber Code hat Fehler oder führt nicht aus |
|
|
| **Kreativität und Design** | Sehr originelles Konzept mit ausgefeiltem visuellen Erscheinungsbild, zeigt tiefgehende Erforschung der gewählten Canvas-Funktion | Gute Nutzung der Canvas-Funktionen mit einigen kreativen Elementen, solides visuelles Ergebnis | Grundlegende Umsetzung mit minimaler Kreativität oder visuellem Reiz |
|
|
| **Codequalität** | Gut organisierter, kommentierter Code nach Best Practices, effiziente Algorithmen | Sauberer Code mit einigen Kommentaren, grundlegende Codierstandards eingehalten | Code mangelhaft organisiert, wenige Kommentare, ineffiziente Umsetzung |
|
|
|
|
## Reflexionsfragen
|
|
|
|
Nach Abschluss Ihres Projekts überlegen Sie bitte folgende Fragen:
|
|
|
|
1. **Welche Canvas API Funktion haben Sie gewählt und warum?**
|
|
2. **Welche Herausforderungen sind Ihnen beim Bauen Ihres Projekts begegnet?**
|
|
3. **Wie könnten Sie dieses Projekt zu einer größeren Anwendung oder einem Spiel erweitern?**
|
|
4. **Welche anderen Canvas API Funktionen möchten Sie als nächstes erkunden?**
|
|
|
|
> 💡 **Pro-Tipp**: Beginnen Sie einfach und fügen Sie schrittweise Komplexität hinzu. Ein gut ausgeführtes einfaches Projekt ist besser als ein zu ehrgeiziges Projekt, das nicht richtig funktioniert!
|
|
|
|
---
|
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
|
**Haftungsausschluss**:
|
|
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir um Genauigkeit bemüht sind, können automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten. Das Originaldokument in seiner Originalsprache ist als maßgebliche Quelle zu betrachten. Für wichtige Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die aus der Nutzung dieser Übersetzung entstehen.
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER END --> |