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.4 KiB
74 lines
4.4 KiB
# Ülesanne: Uuri Canvas API-d
|
|
|
|
## Õpieesmärgid
|
|
|
|
Selle ülesande täitmisega näitad oma arusaamist Canvas API põhitõdedest ning rakendad loomingulist probleemide lahendamist, et luua visuaalseid elemente kasutades JavaScripti ja HTML5 canvas elementi.
|
|
|
|
## Juhised
|
|
|
|
Vali üks Canvas API aspekt, mis sind huvitab, ja loo selle ümber kaasahaarav visuaalne projekt. See ülesanne julgustab sind katsetama oma joonistamisvõimalusi ning ehitama midagi unikaalselt enda oma.
|
|
|
|
### Projektide ideed inspiratsiooniks
|
|
|
|
**Geomeetrilised mustrid:**
|
|
- **Loo** galaktika animeeritud vilkuvate tähtedega juhuslike asukohtadega
|
|
- **Kujunda** huvitav tekstuur korduvate geomeetriliste kujunditega
|
|
- **Ehita** kaleidoskoobi efekt pöörlevate ja värvikirevate mustritega
|
|
|
|
**Interaktiivsed elemendid:**
|
|
- **Arenda** joonistusriist, mis reageerib hiire liikumisele
|
|
- **Rakenda** kujundid, mis muudavad värvi klikimisel
|
|
- **Kujunda** lihtne animatsiooni tsükkel liikuvate elementidega
|
|
|
|
**Mängudega seotud graafika:**
|
|
- **Loo** keriv taust ruumimängule
|
|
- **Valmista** osakeste efektid nagu plahvatused või maagilised võlud
|
|
- **Loo** animeeritud sprite'id mitme kaadriga
|
|
|
|
### Arendusjuhised
|
|
|
|
**Uurimine ja inspiratsioon:**
|
|
- **Sirvi** CodePeni loomingulisi canvas näiteid (inspiratsiooniks, mitte kopeerimiseks)
|
|
- **Uuri** [Canvas API dokumentatsiooni](https://developer.mozilla.org/docs/Web/API/Canvas_API) täiendavate meetodite kohta
|
|
- **Katseta** erinevaid joonistusmeetodeid, värve ja animatsioone
|
|
|
|
**Tehnilised nõuded:**
|
|
- **Kasuta** õiget canvas seadistust koos `getContext('2d')`
|
|
- **Lisa** olulised kommentaarid oma lähenemise selgitamiseks
|
|
- **Testi** oma koodi põhjalikult, et see töötaks veatult
|
|
- **Rakenda** kaasaegset JavaScripti süntaksit (const/let, nooled-funktsioonid)
|
|
|
|
**Loominguline väljendus:**
|
|
- **Keskendu** ühele Canvas API funktsioonile, kuid uuri seda põhjalikult
|
|
- **Lisa** oma loominguline nüanss, et teha projekt isiklikuks
|
|
- **Mõtle** kuidas võiks su loomingust saada osa suuremast rakendusest
|
|
|
|
### Esitamise juhised
|
|
|
|
Esita oma valmis projekt ühes HTML-failis koos manustatud CSS-i ja JavaScriptiga või eraldi failidena kaustas. Lisa lühike kommentaar oma loominguliste valikute ja Canvas API funktsioonide kohta, mida uurisid.
|
|
|
|
## Hindamiskriteeriumid
|
|
|
|
| Kriteerium | Silmapaistev | Piisav | Vajab parendamist |
|
|
|------------|---------------|--------|-------------------|
|
|
| **Tehniline teostus** | Canvas API kasutamine loominguliselt mitme funktsiooniga, kood töötab laitmatult, rakendatud kaasaegne JavaScripti süntaks | Canvas API korrektne kasutus, kood töötab väikeste probleemidega, põhiline teostus | Canvas API kasutamise katse, kuid koodis on vead või see ei käivitu |
|
|
| **Loomingulisus ja disain** | Väga originaalne kontseptsioon lihvitud visuaalse atraktiivsusega, näitab sügavat Canvas-funktsiooni uurimist | Canvas funktsioonide hea kasutus mõne loomingulise elemendiga, solidne visuaalne tulemus | Põhiline teostus minimaalse loomingulisuse või visuaalse atraktiivsusega |
|
|
| **Koodi kvaliteet** | Hästi organiseeritud, kommenteeritud kood, mis järgib parimaid tavasid, tõhusad algoritmid | Puhas kood mõne kommentaariga, järgib põhilisi kodeerimisstandardeid | Kood on ebaorganiseeritud, minimaalsed kommentaarid, ebatõhus teostus |
|
|
|
|
## Refleksiooniküsimused
|
|
|
|
Pärast oma projekti lõpetamist mõtle järgmistele küsimustele:
|
|
|
|
1. **Millise Canvas API funktsiooni valisid ja miks?**
|
|
2. **Milliste väljakutsetega projekti loomisel kokku puutusid?**
|
|
3. **Kuidas võiksid seda projekti laiendada suuremaks rakenduseks või mänguks?**
|
|
4. **Milliseid teisi Canvas API funktsioone sooviksid järgmiseks uurida?**
|
|
|
|
> 💡 **Kasulik näpunäide**: Alusta lihtsast ning lisa keerukust järk-järgult. Hästi teostatud lihtne projekt on parem kui üleambitsioonikas projekt, mis ei tööta korralikult!
|
|
|
|
---
|
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
|
**Vastutusest loobumine**:
|
|
See dokument on tõlgitud kasutades tehisintellekti tõlketeenust [Co-op Translator](https://github.com/Azure/co-op-translator). Kuigi püüame täpsust, palun arvestage, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Originaaldokument selle emakeeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitatakse kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valesti mõistmiste eest.
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER END --> |