# Zadanie: Preskúmajte API Canvas ## Ciele učenia Splnením tohto zadania preukážete svoje pochopenie základov API Canvas a využijete kreatívne riešenie problémov na vytvorenie vizuálnych prvkov pomocou JavaScriptu a HTML5 canvas. ## Pokyny Vyberte si jeden aspekt API Canvas, ktorý vás zaujíma, a vytvorte okolo neho pútavý vizuálny projekt. Toto zadanie vás povzbudzuje k experimentovaniu s kresliacimi schopnosťami, ktoré ste sa naučili, a k vytvoreniu niečoho jedinečného. ### Nápady na projekty pre inšpiráciu **Geometrické vzory:** - **Vytvorte** galaxiu animovaných blikajúcich hviezd pomocou náhodného umiestnenia - **Navrhnite** zaujímavú textúru pomocou opakujúcich sa geometrických tvarov - **Postavte** kaleidoskopický efekt s rotujúcimi, farebnými vzormi **Interaktívne prvky:** - **Vyvinúť** kresliaci nástroj, ktorý reaguje na pohyby myši - **Implementovať** tvary, ktoré menia farbu po kliknutí - **Navrhnúť** jednoduchú animáciu s pohybujúcimi sa prvkami **Grafika pre hry:** - **Vytvorte** posúvajúce sa pozadie pre vesmírnu hru - **Postavte** časticové efekty ako výbuchy alebo magické kúzla - **Vytvorte** animované sprite s viacerými snímkami ### Pokyny pre vývoj **Výskum a inšpirácia:** - **Prehliadajte** CodePen pre kreatívne príklady canvas (na inšpiráciu, nie kopírovanie) - **Študujte** [dokumentáciu API Canvas](https://developer.mozilla.org/docs/Web/API/Canvas_API) pre ďalšie metódy - **Experimentujte** s rôznymi kresliacimi funkciami, farbami a animáciami **Technické požiadavky:** - **Použite** správne nastavenie canvas s `getContext('2d')` - **Zahrňte** zmysluplné komentáre vysvetľujúce váš prístup - **Testujte** svoj kód dôkladne, aby ste sa uistili, že funguje bez chýb - **Použite** modernú syntax JavaScriptu (const/let, arrow functions) **Kreatívny prejav:** - **Zamerajte sa** na jednu funkciu API Canvas, ale preskúmajte ju do hĺbky - **Pridajte** svoj vlastný kreatívny nádych, aby bol projekt osobný - **Zvážte**, ako by vaše dielo mohlo byť súčasťou väčšej aplikácie ### Pokyny na odovzdanie Odovzdajte svoj hotový projekt ako jeden HTML súbor s vloženým CSS a JavaScriptom alebo ako samostatné súbory v priečinku. Zahrňte krátky komentár, ktorý vysvetľuje vaše kreatívne rozhodnutia a funkcie API Canvas, ktoré ste preskúmali. ## Hodnotiace kritériá | Kritérium | Vynikajúce | Dostatočné | Potrebné zlepšenie | |-----------|------------|------------|--------------------| | **Technická implementácia** | API Canvas použité kreatívne s viacerými funkciami, kód funguje bezchybne, použitá moderná syntax JavaScriptu | API Canvas použité správne, kód funguje s drobnými problémami, základná implementácia | API Canvas pokusne použité, ale kód obsahuje chyby alebo nefunguje | | **Kreativita a dizajn** | Veľmi originálny koncept s vylešteným vizuálnym vzhľadom, preukazuje hlboké preskúmanie zvolenej funkcie API Canvas | Dobré využitie funkcií API Canvas s niektorými kreatívnymi prvkami, solídny vizuálny výsledok | Základná implementácia s minimálnou kreativitou alebo vizuálnou príťažlivosťou | | **Kvalita kódu** | Dobre organizovaný, komentovaný kód podľa najlepších praktík, efektívne algoritmy | Čistý kód s niekoľkými komentármi, dodržiava základné štandardy kódovania | Kód postráda organizáciu, minimálne komentáre, neefektívna implementácia | ## Otázky na zamyslenie Po dokončení projektu zvážte tieto otázky: 1. **Akú funkciu API Canvas ste si vybrali a prečo?** 2. **Aké výzvy ste stretli pri tvorbe projektu?** 3. **Ako by ste mohli rozšíriť tento projekt na väčšiu aplikáciu alebo hru?** 4. **Aké ďalšie funkcie API Canvas by ste chceli preskúmať nabudúce?** > 💡 **Tip:** Začnite jednoducho a postupne pridávajte zložitosť. Dobre vykonaný jednoduchý projekt je lepší ako príliš ambiciózny projekt, ktorý nefunguje správne! --- **Zrieknutie sa zodpovednosti**: Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho rodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.