# Naloga: Raziskovanje Canvas API-ja ## Cilji učenja Z dokončanjem te naloge boste pokazali svoje razumevanje osnov Canvas API-ja in uporabili kreativno reševanje problemov za ustvarjanje vizualnih elementov z uporabo JavaScripta in HTML5 canvas. ## Navodila Izberite en vidik Canvas API-ja, ki vas zanima, in ustvarite privlačen vizualni projekt na to temo. Ta naloga vas spodbuja k eksperimentiranju z risalnimi zmožnostmi, ki ste se jih naučili, medtem ko ustvarjate nekaj edinstvenega. ### Ideje za projekte, ki vas lahko navdihnejo **Geometrijski vzorci:** - **Ustvarite** galaksijo animiranih utripajočih zvezd z naključnim pozicioniranjem - **Oblikujte** zanimivo teksturo z uporabo ponavljajočih se geometrijskih oblik - **Zgradite** kalejdoskopski učinek z vrtečimi se, barvitimi vzorci **Interaktivni elementi:** - **Razvijte** orodje za risanje, ki se odziva na premike miške - **Implementirajte** oblike, ki spremenijo barvo ob kliku - **Oblikujte** preprosto animacijsko zanko z gibajočimi se elementi **Grafika povezana z igrami:** - **Ustvarite** drseče ozadje za vesoljsko igro - **Zgradite** učinke delcev, kot so eksplozije ali čarobni uroki - **Ustvarite** animirane sprite z več okvirji ### Smernice za razvoj **Raziskovanje in navdih:** - **Prebrskajte** CodePen za kreativne primere uporabe canvas (za navdih, ne za kopiranje) - **Preučite** [dokumentacijo Canvas API-ja](https://developer.mozilla.org/docs/Web/API/Canvas_API) za dodatne metode - **Eksperimentirajte** z različnimi funkcijami risanja, barvami in animacijami **Tehnične zahteve:** - **Uporabite** pravilno nastavitev canvas z `getContext('2d')` - **Vključite** smiselne komentarje, ki pojasnjujejo vaš pristop - **Temeljito preizkusite** svojo kodo, da zagotovite, da deluje brez napak - **Uporabite** sodobno sintakso JavaScripta (const/let, puščične funkcije) **Kreativni izraz:** - **Osredotočite se** na eno funkcijo Canvas API-ja, vendar jo temeljito raziščite - **Dodajte** svoj kreativni pridih, da bo projekt osebno vaš - **Razmislite**, kako bi lahko vaša kreacija postala del večje aplikacije ### Smernice za oddajo Oddajte dokončan projekt kot eno datoteko HTML z vgrajenim CSS-jem in JavaScriptom ali kot ločene datoteke v mapi. Vključite kratek komentar, ki pojasnjuje vaše kreativne odločitve in funkcije Canvas API-ja, ki ste jih raziskovali. ## Rubrika | Kriterij | Odlično | Zadostno | Potrebno izboljšanje | |----------|---------|----------|----------------------| | **Tehnična izvedba** | Canvas API uporabljen kreativno z več funkcijami, koda deluje brezhibno, uporabljena sodobna sintaksa JavaScripta | Canvas API pravilno uporabljen, koda deluje z manjšimi težavami, osnovna izvedba | Poskus uporabe Canvas API-ja, vendar koda vsebuje napake ali ne deluje | | **Kreativnost in oblikovanje** | Zelo izviren koncept z dodelano vizualno privlačnostjo, prikazuje globoko raziskovanje izbrane funkcije Canvas | Dobra uporaba funkcij Canvas z nekaj kreativnimi elementi, solidni vizualni rezultat | Osnovna izvedba z minimalno kreativnostjo ali vizualno privlačnostjo | | **Kakovost kode** | Dobro organizirana, komentirana koda, ki sledi najboljšim praksam, učinkoviti algoritmi | Čista koda z nekaj komentarji, sledi osnovnim standardom kodiranja | Koda je neorganizirana, minimalno komentirana, neučinkovita izvedba | ## Refleksijska vprašanja Po dokončanju projekta razmislite o naslednjih vprašanjih: 1. **Katero funkcijo Canvas API-ja ste izbrali in zakaj?** 2. **S kakšnimi izzivi ste se soočili med gradnjo projekta?** 3. **Kako bi lahko ta projekt razširili v večjo aplikacijo ali igro?** 4. **Katere druge funkcije Canvas API-ja bi želeli raziskati v prihodnje?** > 💡 **Koristen nasvet**: Začnite preprosto in postopoma dodajajte kompleksnost. Dobro izveden preprost projekt je boljši od preveč ambicioznega projekta, ki ne deluje pravilno! --- **Omejitev odgovornosti**: Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku naj se šteje za avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne odgovarjamo za morebitne nesporazume ali napačne razlage, ki izhajajo iz uporabe tega prevoda.