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 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:
- Millise Canvas API funktsiooni valisid ja miks?
- Milliste väljakutsetega projekti loomisel kokku puutusid?
- Kuidas võiksid seda projekti laiendada suuremaks rakenduseks või mänguks?
- 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!
Vastutusest loobumine: See dokument on tõlgitud kasutades tehisintellekti tõlketeenust 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.