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-23T01:04:56+00:00",
|
|
"source_file": "6-space-game/2-drawing-to-canvas/assignment.md",
|
|
"language_code": "nl"
|
|
}
|
|
-->
|
|
# Opdracht: Verken de Canvas API
|
|
|
|
## Leerdoelen
|
|
|
|
Door deze opdracht te voltooien, toon je je begrip van de basisprincipes van de Canvas API en pas je creatieve probleemoplossing toe om visuele elementen te bouwen met JavaScript en HTML5 canvas.
|
|
|
|
## Instructies
|
|
|
|
Kies een aspect van de Canvas API dat je interesseert en maak een boeiend visueel project eromheen. Deze opdracht moedigt je aan om te experimenteren met de tekenmogelijkheden die je hebt geleerd, terwijl je iets unieks creëert.
|
|
|
|
### Projectideeën ter inspiratie
|
|
|
|
**Geometrische patronen:**
|
|
- **Maak** een sterrenstelsel van geanimeerde, fonkelende sterren met willekeurige positionering
|
|
- **Ontwerp** een interessante textuur met herhaalde geometrische vormen
|
|
- **Bouw** een caleidoscoopeffect met roterende, kleurrijke patronen
|
|
|
|
**Interactieve elementen:**
|
|
- **Ontwikkel** een tekentool die reageert op muisbewegingen
|
|
- **Implementeer** vormen die van kleur veranderen wanneer erop wordt geklikt
|
|
- **Ontwerp** een eenvoudige animatielus met bewegende elementen
|
|
|
|
**Game-gerelateerde graphics:**
|
|
- **Maak** een scrollende achtergrond voor een ruimtegame
|
|
- **Bouw** deeltjeseffecten zoals explosies of magische spreuken
|
|
- **Creëer** geanimeerde sprites met meerdere frames
|
|
|
|
### Ontwikkelingsrichtlijnen
|
|
|
|
**Onderzoek en inspiratie:**
|
|
- **Blader** door CodePen voor creatieve canvasvoorbeelden (voor inspiratie, niet om te kopiëren)
|
|
- **Bestudeer** de [Canvas API-documentatie](https://developer.mozilla.org/docs/Web/API/Canvas_API) voor aanvullende methoden
|
|
- **Experimenteer** met verschillende tekenfuncties, kleuren en animaties
|
|
|
|
**Technische vereisten:**
|
|
- **Gebruik** een correcte canvas setup met `getContext('2d')`
|
|
- **Voeg** betekenisvolle opmerkingen toe die je aanpak uitleggen
|
|
- **Test** je code grondig om ervoor te zorgen dat deze foutloos werkt
|
|
- **Pas** moderne JavaScript-syntaxis toe (const/let, arrow functions)
|
|
|
|
**Creatieve expressie:**
|
|
- **Focus** op één Canvas API-functie, maar verken deze diepgaand
|
|
- **Voeg** je eigen creatieve draai toe om het project persoonlijk te maken
|
|
- **Overweeg** hoe je creatie deel kan uitmaken van een grotere applicatie
|
|
|
|
### Inleverrichtlijnen
|
|
|
|
Lever je voltooide project in als een enkele HTML-bestand met ingebouwde CSS en JavaScript, of als aparte bestanden in een map. Voeg een korte opmerking toe waarin je je creatieve keuzes en de Canvas API-functies die je hebt verkend uitlegt.
|
|
|
|
## Rubriek
|
|
|
|
| Criteria | Uitmuntend | Voldoende | Verbetering nodig |
|
|
|----------|------------|-----------|-------------------|
|
|
| **Technische implementatie** | Canvas API creatief gebruikt met meerdere functies, code werkt foutloos, moderne JavaScript-syntaxis toegepast | Canvas API correct gebruikt, code werkt met kleine problemen, basisimplementatie | Poging tot gebruik van Canvas API, maar code bevat fouten of werkt niet |
|
|
| **Creativiteit en ontwerp** | Zeer origineel concept met verfijnde visuele aantrekkingskracht, toont diepgaande verkenning van gekozen Canvas-functie | Goed gebruik van Canvas-functies met enkele creatieve elementen, solide visueel resultaat | Basisimplementatie met minimale creativiteit of visuele aantrekkingskracht |
|
|
| **Codekwaliteit** | Goed georganiseerde, gedocumenteerde code volgens best practices, efficiënte algoritmes | Schone code met enkele opmerkingen, volgt basisstandaarden voor codering | Code mist organisatie, minimale opmerkingen, inefficiënte implementatie |
|
|
|
|
## Reflectievragen
|
|
|
|
Na het voltooien van je project, overweeg deze vragen:
|
|
|
|
1. **Welke Canvas API-functie heb je gekozen en waarom?**
|
|
2. **Welke uitdagingen ben je tegengekomen tijdens het bouwen van je project?**
|
|
3. **Hoe zou je dit project kunnen uitbreiden naar een grotere applicatie of game?**
|
|
4. **Welke andere Canvas API-functies zou je hierna willen verkennen?**
|
|
|
|
> 💡 **Pro Tip**: Begin eenvoudig en voeg geleidelijk complexiteit toe. Een goed uitgevoerd eenvoudig project is beter dan een te ambitieus project dat niet goed werkt!
|
|
|
|
---
|
|
|
|
**Disclaimer**:
|
|
Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor kritieke informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling. |