# Zadání: Prozkoumejte Canvas API ## Cíle učení Splněním tohoto úkolu prokážete své porozumění základům Canvas API a využijete kreativní řešení problémů k vytvoření vizuálních prvků pomocí JavaScriptu a HTML5 canvas. ## Pokyny Vyberte si jeden aspekt Canvas API, který vás zajímá, a vytvořte kolem něj poutavý vizuální projekt. Tento úkol vás vybízí k experimentování s kreslícími schopnostmi, které jste se naučili, a k vytvoření něčeho jedinečného. ### Nápady na projekty pro inspiraci **Geometrické vzory:** - **Vytvořte** galaxii animovaných blikajících hvězd pomocí náhodného umístění - **Navrhněte** zajímavou texturu pomocí opakovaných geometrických tvarů - **Postavte** kaleidoskopický efekt s rotujícími, barevnými vzory **Interaktivní prvky:** - **Vyviněte** kreslící nástroj, který reaguje na pohyby myši - **Implementujte** tvary, které mění barvu při kliknutí - **Navrhněte** jednoduchou animaci s pohybujícími se prvky **Grafika pro hry:** - **Vytvořte** posouvající se pozadí pro vesmírnou hru - **Postavte** částicové efekty jako exploze nebo magické kouzla - **Vytvořte** animované sprity s více snímky ### Pokyny pro vývoj **Výzkum a inspirace:** - **Prohlédněte si** CodePen pro kreativní příklady canvasu (pro inspiraci, ne kopírování) - **Prostudujte** [dokumentaci Canvas API](https://developer.mozilla.org/docs/Web/API/Canvas_API) pro další metody - **Experimentujte** s různými kreslícími funkcemi, barvami a animacemi **Technické požadavky:** - **Použijte** správné nastavení canvasu s `getContext('2d')` - **Zahrňte** smysluplné komentáře vysvětlující váš přístup - **Otestujte** svůj kód důkladně, aby běžel bez chyb - **Použijte** moderní syntaxi JavaScriptu (const/let, arrow functions) **Kreativní vyjádření:** - **Zaměřte se** na jednu funkci Canvas API, ale prozkoumejte ji do hloubky - **Přidejte** svůj vlastní kreativní prvek, aby byl projekt osobitý - **Zvažte**, jak by vaše dílo mohlo být součástí větší aplikace ### Pokyny k odevzdání Odevzdejte svůj hotový projekt jako jeden HTML soubor s vloženým CSS a JavaScriptem nebo jako samostatné soubory ve složce. Přiložte krátký komentář vysvětlující vaše kreativní volby a funkce Canvas API, které jste prozkoumali. ## Hodnotící kritéria | Kritéria | Vynikající | Přiměřené | Vyžaduje zlepšení | |----------|-----------|-----------|-------------------| | **Technická implementace** | Canvas API použito kreativně s více funkcemi, kód běží bezchybně, použita moderní syntaxe JavaScriptu | Canvas API použito správně, kód běží s drobnými problémy, základní implementace | Canvas API bylo použito, ale kód obsahuje chyby nebo nefunguje | | **Kreativita a design** | Vysoce originální koncept s propracovaným vizuálním vzhledem, prokazuje hluboké prozkoumání vybrané funkce Canvas | Dobré využití funkcí Canvas s některými kreativními prvky, solidní vizuální výsledek | Základní implementace s minimální kreativitou nebo vizuální přitažlivostí | | **Kvalita kódu** | Dobře organizovaný, komentovaný kód podle nejlepších postupů, efektivní algoritmy | Čistý kód s některými komentáři, dodržuje základní standardy kódování | Kód postrádá organizaci, minimální komentáře, neefektivní implementace | ## Otázky k zamyšlení Po dokončení projektu zvažte tyto otázky: 1. **Jakou funkci Canvas API jste si vybrali a proč?** 2. **S jakými výzvami jste se při tvorbě projektu setkali?** 3. **Jak byste mohli tento projekt rozšířit na větší aplikaci nebo hru?** 4. **Jaké další funkce Canvas API byste chtěli prozkoumat příště?** > 💡 **Tip**: Začněte jednoduše a postupně přidávejte složitost. Dobře provedený jednoduchý projekt je lepší než příliš ambiciózní projekt, který nefunguje správně! --- **Prohlášení**: Tento dokument byl přeložen pomocí služby AI pro překlad [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte prosím na paměti, že automatizované překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho rodném jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.