|
|
# 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 --> |
