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.6 KiB
81 lines
4.6 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "87cd43afe5b69dbbffb5c4b209ea6791",
|
|
"translation_date": "2025-10-25T00:42:37+00:00",
|
|
"source_file": "6-space-game/2-drawing-to-canvas/assignment.md",
|
|
"language_code": "sl"
|
|
}
|
|
-->
|
|
# 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. |