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.6 KiB
74 lines
4.6 KiB
# Užduotis: Tyrinėkite Canvas API
|
|
|
|
## Mokymosi tikslai
|
|
|
|
Vykdydami šią užduotį, parodysite savo Canvas API pagrindų supratimą ir taikysite kūrybišką problemų sprendimą, kad sukurtumėte vizualius elementus naudojant JavaScript ir HTML5 canvas.
|
|
|
|
## Instrukcijos
|
|
|
|
Pasirinkite vieną Canvas API aspektą, kuris jus domina, ir sukurkite įtraukiantį vizualinį projektą apie jį. Ši užduotis skatina eksperimentuoti su piešimo galimybėmis, kurias išmokote, tuo pačiu kuriant kažką unikalaus.
|
|
|
|
### Projektų idėjos jūsų įkvėpimui
|
|
|
|
**Geometriniai raštai:**
|
|
- **Sukurkite** animuotą žvaigždžių galaktiką su atsitiktiniu išdėstymu
|
|
- **Sukurkite** įdomią tekstūrą naudojant pakartotas geometrines formas
|
|
- **Sukurkite** kaleidoskopo efektą su besisukančiais, spalvingais raštais
|
|
|
|
**Interaktyvūs elementai:**
|
|
- **Sukurkite** piešimo įrankį, kuris reaguoja į pelės judesius
|
|
- **Įgyvendinkite** formas, kurios keičia spalvą paspaudus
|
|
- **Sukurkite** paprastą animacijos ciklą su judančiais elementais
|
|
|
|
**Žaidimams skirtos grafikos:**
|
|
- **Sukurkite** slenkantį foną kosminiam žaidimui
|
|
- **Sukurkite** dalelių efektus, pvz., sprogimus ar magijos burtus
|
|
- **Sukurkite** animuotus sprite'us su keliais kadrais
|
|
|
|
### Kūrybos gairės
|
|
|
|
**Tyrimai ir įkvėpimas:**
|
|
- **Peržiūrėkite** CodePen kūrybinius canvas pavyzdžius (įkvėpimui, ne kopijavimui)
|
|
- **Studijuokite** [Canvas API dokumentaciją](https://developer.mozilla.org/docs/Web/API/Canvas_API) papildomoms funkcijoms
|
|
- **Eksperimentuokite** su skirtingomis piešimo funkcijomis, spalvomis ir animacijomis
|
|
|
|
**Techninės reikalavimai:**
|
|
- **Naudokite** tinkamą canvas nustatymą su `getContext('2d')`
|
|
- **Įtraukite** prasmingus komentarus, paaiškinančius jūsų metodą
|
|
- **Ištestuokite** savo kodą, kad jis veiktų be klaidų
|
|
- **Taikykite** modernią JavaScript sintaksę (const/let, rodyklines funkcijas)
|
|
|
|
**Kūrybinė raiška:**
|
|
- **Sutelkkite dėmesį** į vieną Canvas API savybę, bet ją išsamiai išnagrinėkite
|
|
- **Pridėkite** savo kūrybinį posūkį, kad projektas būtų asmeniškas
|
|
- **Apsvarstykite**, kaip jūsų kūrinys galėtų būti didesnės programos dalimi
|
|
|
|
### Pateikimo gairės
|
|
|
|
Pateikite baigtą projektą kaip vieną HTML failą su įterptu CSS ir JavaScript arba kaip atskirus failus aplanke. Įtraukite trumpą komentarą, kuriame paaiškinate savo kūrybinius sprendimus ir Canvas API funkcijas, kurias tyrėte.
|
|
|
|
## Vertinimo kriterijai
|
|
|
|
| Kriterijus | Puikiai | Patenkinamai | Reikia tobulinti |
|
|
|------------|---------|--------------|------------------|
|
|
| **Techninė įgyvendinimas** | Canvas API naudojamas kūrybiškai su keliomis funkcijomis, kodas veikia nepriekaištingai, taikoma moderni JavaScript sintaksė | Canvas API naudojamas teisingai, kodas veikia su mažomis problemomis, pagrindinis įgyvendinimas | Canvas API bandyta naudoti, bet kodas klaidingas arba neveikia |
|
|
| **Kūrybiškumas ir dizainas** | Labai originali koncepcija su poliruotu vizualiniu patrauklumu, parodo gilų pasirinktų Canvas funkcijų tyrimą | Geras Canvas funkcijų naudojimas su kai kuriais kūrybiniais elementais, tvirtas vizualinis rezultatas | Pagrindinis įgyvendinimas su minimalia kūryba ar vizualumu |
|
|
| **Kodo kokybė** | Gerai organizuotas, komentuotas kodas pagal gerąsias praktikas, efektyvūs algoritmai | Švarus kodas su kai kuriais komentarais, laikomasi pagrindinių kodavimo standartų | Kodas be organizacijos, minimalūs komentarai, neefektyvus įgyvendinimas |
|
|
|
|
## Refleksijos klausimai
|
|
|
|
Baigę projektą, apsvarstykite šiuos klausimus:
|
|
|
|
1. **Kokią Canvas API funkciją pasirinkote ir kodėl?**
|
|
2. **Su kokiais iššūkiais susidūrėte kurdami projektą?**
|
|
3. **Kaip galėtumėte išplėsti šį projektą į didesnę programą ar žaidimą?**
|
|
4. **Kitas Canvas API funkcijas, kurias norėtumėte tyrinėti?**
|
|
|
|
> 💡 **Naudingas patarimas**: Pradėkite paprastai ir palaipsniui didinkite sudėtingumą. Gerai įvykdytas paprastas projektas yra geriau nei pernelyg ambicingas, kuris neveikia tinkamai!
|
|
|
|
---
|
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
|
**Atsakomybės apribojimas**:
|
|
Šis dokumentas buvo išverstas naudojant dirbtinio intelekto vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors stengiamės užtikrinti tikslumą, prašome atkreipti dėmesį, kad automatizuoti vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Svarbiai informacijai rekomenduojamas profesionalus žmogaus atliktas vertimas. Mes neatsakome už bet kokius nesusipratimus ar neteisingus aiškinimus, kylančius naudojant šį vertimą.
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER END --> |