# Zadanie: Poznaj API Canvas

## Cele nauki

Realizując to zadanie, pokażesz swoje rozumienie podstaw API Canvas i zastosujesz kreatywne rozwiązywanie problemów, aby zbudować elementy wizualne za pomocą JavaScript i płótna HTML5.

## Instrukcje

Wybierz jeden aspekt API Canvas, który Cię interesuje, i stwórz wokół niego angażujący projekt wizualny. To zadanie zachęca do eksperymentowania z możliwościami rysowania, które poznałeś, tworząc coś unikalnie swojego.

### Pomysły na projekt, które Cię zainspirują

**Wzory geometryczne:**
- **Stwórz** galaktykę animowanych migoczących gwiazd, korzystając z losowego rozmieszczenia
- **Zaprojektuj** ciekawą teksturę z powtarzających się kształtów geometrycznych
- **Zbuduj** efekt kalejdoskopu z obracającymi się, kolorowymi wzorami

**Elementy interaktywne:**
- **Opracuj** narzędzie do rysowania reagujące na ruchy myszy
- **Zaimplementuj** kształty zmieniające kolor po kliknięciu
- **Zaprojektuj** prostą pętlę animacji z poruszającymi się elementami

**Grafika związana z grami:**
- **Wykreuj** przewijające się tło do gry kosmicznej
- **Zbuduj** efekty cząsteczkowe, takie jak eksplozje lub zaklęcia
- **Stwórz** animowane sprite’y z wieloma klatkami

### Wytyczne odnośnie rozwoju

**Badania i inspiracje:**
- **Przeglądaj** CodePen w poszukiwaniu kreatywnych przykładów canvas (do inspiracji, nie kopiowania)
- **Przestudiuj** [dokumentację API Canvas](https://developer.mozilla.org/docs/Web/API/Canvas_API) dla dodatkowych metod
- **Eksperymentuj** z różnymi funkcjami rysowania, kolorami i animacjami

**Wymagania techniczne:**
- **Używaj** prawidłowej konfiguracji canvas z `getContext('2d')`
- **Dołącz** znaczące komentarze tłumaczące twoje podejście
- **Testuj** swój kod dokładnie, aby działał bez błędów
- **Stosuj** nowoczesną składnię JavaScript (const/let, funkcje strzałkowe)

**Wyrażenie kreatywności:**
- **Skup się** na jednej funkcji API Canvas, ale zgłębiaj ją dokładnie
- **Dodaj** swój własny, kreatywny twist, by projekt był osobisty
- **Zastanów się**, jak twoja kreacja mogłaby być częścią większej aplikacji

### Wytyczne dotyczące przesłania rozwiązania

Prześlij ukończony projekt jako pojedynczy plik HTML z osadzonym CSS i JavaScriptem lub jako osobne pliki w folderze. Dołącz krótki komentarz wyjaśniający twoje kreatywne wybory i funkcje API Canvas, które eksplorowałeś.

## Kryteria oceny

| Kryteria                 | Wzorcowe                                                 | Wystarczające                                                | Wymaga poprawy                                                  |
|--------------------------|----------------------------------------------------------|--------------------------------------------------------------|----------------------------------------------------------------|
| **Wdrożenie techniczne** | API Canvas użyte kreatywnie z wieloma funkcjami, kod działa bezbłędnie, zastosowano nowoczesną składnię JavaScript | API Canvas poprawnie użyte, kod działa z drobnymi problemami, podstawowa implementacja | Próba użycia API Canvas, ale kod zawiera błędy lub nie działa |
| **Kreatywność i projekt** | Bardzo oryginalna koncepcja o dopracowanej atrakcyjności wizualnej, wykazuje głębokie zbadanie wybranej funkcji Canvas | Dobry wykorzystanie funkcji Canvas z elementami kreatywnymi, solidny efekt wizualny | Podstawowa implementacja z minimalną kreatywnością lub atrakcyjnością wizualną |
| **Jakość kodu**          | Dobrze zorganizowany, komentowany kod zgodny z najlepszymi praktykami, efektywne algorytmy | Czysty kod z częściowymi komentarzami, przestrzeganie podstawowych standardów | Kod nieuporządkowany, minimalne komentarze, nieefektywna implementacja |

## Pytania do refleksji

Po ukończeniu projektu rozważ następujące pytania:

1. **Jaką funkcję API Canvas wybrałeś i dlaczego?**
2. **Jakie napotkałeś wyzwania podczas budowania projektu?**
3. **Jak mógłbyś rozszerzyć ten projekt do większej aplikacji lub gry?**
4. **Jakie inne funkcje API Canvas chciałbyś zbadać następnie?**

> 💡 **Przydatna wskazówka**: Zacznij prosto i stopniowo dodawaj złożoność. Dobrze zrealizowany prosty projekt jest lepszy niż zbyt ambitny projekt, który nie działa poprawnie!

---

<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Zastrzeżenie**:
Niniejszy dokument został przetłumaczony za pomocą usługi tłumaczeń AI [Co-op Translator](https://github.com/Azure/co-op-translator). Choć dążymy do dokładności, prosimy mieć na uwadze, że tłumaczenia automatyczne mogą zawierać błędy lub nieścisłości. Oryginalny dokument w języku źródłowym powinien być traktowany jako źródło wiarygodne. W przypadku informacji o istotnym znaczeniu zalecamy skorzystanie z profesjonalnego tłumaczenia wykonanego przez człowieka. Nie ponosimy odpowiedzialności za jakiekolwiek nieporozumienia lub błędne interpretacje wynikające z korzystania z tego tłumaczenia.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->