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.
81 lines
4.7 KiB
81 lines
4.7 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "87cd43afe5b69dbbffb5c4b209ea6791",
|
|
"translation_date": "2025-10-23T22:10:44+00:00",
|
|
"source_file": "6-space-game/2-drawing-to-canvas/assignment.md",
|
|
"language_code": "da"
|
|
}
|
|
-->
|
|
# Opgave: Udforsk Canvas API
|
|
|
|
## Læringsmål
|
|
|
|
Ved at fuldføre denne opgave vil du demonstrere din forståelse af Canvas API's grundlæggende funktioner og anvende kreativ problemløsning til at bygge visuelle elementer ved hjælp af JavaScript og HTML5 canvas.
|
|
|
|
## Instruktioner
|
|
|
|
Vælg et aspekt af Canvas API, der interesserer dig, og skab et engagerende visuelt projekt omkring det. Denne opgave opfordrer dig til at eksperimentere med de tegnefunktioner, du har lært, mens du bygger noget unikt og personligt.
|
|
|
|
### Projektidéer til inspiration
|
|
|
|
**Geometriske mønstre:**
|
|
- **Skab** en galakse af animerede, blinkende stjerner ved hjælp af tilfældig placering
|
|
- **Design** en interessant tekstur ved hjælp af gentagne geometriske former
|
|
- **Byg** en kalejdoskopeffekt med roterende, farverige mønstre
|
|
|
|
**Interaktive elementer:**
|
|
- **Udvikl** et tegneværktøj, der reagerer på musebevægelser
|
|
- **Implementer** former, der skifter farve, når de klikkes på
|
|
- **Design** en simpel animationsloop med bevægelige elementer
|
|
|
|
**Spilrelateret grafik:**
|
|
- **Skab** en rullende baggrund til et rumspil
|
|
- **Byg** partikeleffekter som eksplosioner eller magiske besværgelser
|
|
- **Lav** animerede sprites med flere frames
|
|
|
|
### Udviklingsretningslinjer
|
|
|
|
**Forskning og inspiration:**
|
|
- **Gennemse** CodePen for kreative canvas-eksempler (til inspiration, ikke kopiering)
|
|
- **Studér** [Canvas API-dokumentationen](https://developer.mozilla.org/docs/Web/API/Canvas_API) for yderligere metoder
|
|
- **Eksperimentér** med forskellige tegnefunktioner, farver og animationer
|
|
|
|
**Tekniske krav:**
|
|
- **Brug** korrekt canvas-opsætning med `getContext('2d')`
|
|
- **Inkluder** meningsfulde kommentarer, der forklarer din tilgang
|
|
- **Test** din kode grundigt for at sikre, at den kører uden fejl
|
|
- **Anvend** moderne JavaScript-syntaks (const/let, arrow functions)
|
|
|
|
**Kreativ udfoldelse:**
|
|
- **Fokuser** på én Canvas API-funktion, men udforsk den dybt
|
|
- **Tilføj** dit eget kreative twist for at gøre projektet personligt
|
|
- **Overvej**, hvordan din kreation kunne være en del af en større applikation
|
|
|
|
### Indsendelsesretningslinjer
|
|
|
|
Indsend dit færdige projekt som en enkelt HTML-fil med indlejret CSS og JavaScript eller som separate filer i en mappe. Inkluder en kort kommentar, der forklarer dine kreative valg og de Canvas API-funktioner, du har udforsket.
|
|
|
|
## Vurderingskriterier
|
|
|
|
| Kriterier | Fremragende | Tilstrækkelig | Kræver forbedring |
|
|
|-----------|-------------|---------------|-------------------|
|
|
| **Teknisk implementering** | Canvas API brugt kreativt med flere funktioner, koden kører fejlfrit, moderne JavaScript-syntaks anvendt | Canvas API brugt korrekt, koden kører med mindre problemer, grundlæggende implementering | Canvas API forsøgt, men koden har fejl eller kører ikke |
|
|
| **Kreativitet og design** | Meget originalt koncept med poleret visuel appel, demonstrerer dyb udforskning af valgt Canvas-funktion | God brug af Canvas-funktioner med nogle kreative elementer, solidt visuelt resultat | Grundlæggende implementering med minimal kreativitet eller visuel appel |
|
|
| **Kodekvalitet** | Velorganiseret, kommenteret kode, der følger bedste praksis, effektive algoritmer | Ren kode med nogle kommentarer, følger grundlæggende kodestandarder | Koden mangler organisering, minimale kommentarer, ineffektiv implementering |
|
|
|
|
## Refleksionsspørgsmål
|
|
|
|
Efter at have fuldført dit projekt, overvej følgende spørgsmål:
|
|
|
|
1. **Hvilken Canvas API-funktion valgte du, og hvorfor?**
|
|
2. **Hvilke udfordringer stødte du på under opbygningen af dit projekt?**
|
|
3. **Hvordan kunne du udvide dette projekt til en større applikation eller et spil?**
|
|
4. **Hvilke andre Canvas API-funktioner vil du gerne udforske næste gang?**
|
|
|
|
> 💡 **Pro Tip**: Start simpelt og tilføj gradvist kompleksitet. Et veludført simpelt projekt er bedre end et alt for ambitiøst projekt, der ikke fungerer korrekt!
|
|
|
|
---
|
|
|
|
**Ansvarsfraskrivelse**:
|
|
Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi bestræber os på nøjagtighed, skal du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi er ikke ansvarlige for eventuelle misforståelser eller fejltolkninger, der opstår som følge af brugen af denne oversættelse. |