4.7 KiB
Ödev: Canvas API'yi Keşfet
Öğrenme Hedefleri
Bu ödevi tamamlayarak, Canvas API'nin temel prensiplerini anladığınızı gösterecek ve JavaScript ile HTML5 canvas kullanarak görsel öğeler oluşturmak için yaratıcı problem çözme becerilerinizi uygulayacaksınız.
Talimatlar
Canvas API'nin ilginizi çeken bir yönünü seçin ve etrafında etkileyici bir görsel proje oluşturun. Bu ödev, öğrendiğiniz çizim yeteneklerini deneyerek, tamamen size özgü bir şey yaratmanızı teşvik eder.
İlham Verici Proje Fikirleri
Geometrik Desenler:
- Bir galaksi dolusu rastgele konumlandırılmış, animasyonlu parlayan yıldızlar oluşturun
- Tekrarlayan geometrik şekiller kullanarak ilginç bir doku tasarlayın
- Dönen, renkli desenlerle bir kaleidoskop efekti oluşturun
Etkileşimli Öğeler:
- Fare hareketlerine tepki veren bir çizim aracı geliştirin
- Tıklanıldığında renk değiştiren şekiller uygulayın
- Hareketli öğelerle basit bir animasyon döngüsü tasarlayın
Oyunla İlgili Grafikler:
- Bir uzay oyunu için kaydırmalı bir arka plan oluşturun
- Patlamalar veya büyü efektleri gibi parçacık efektleri yapın
- Birden fazla kareye sahip animasyonlu sprite'lar oluşturun
Geliştirme Yönergeleri
Araştırma ve İlham:
- CodePen'i gezerek yaratıcı canvas örneklerini inceleyin (ilham almak için, kopyalamak için değil)
- Canvas API belgelerini inceleyerek ek yöntemler öğrenin
- Farklı çizim fonksiyonları, renkler ve animasyonlarla deney yapın
Teknik Gereksinimler:
getContext('2d')ile doğru bir canvas kurulumu kullanın- Yaklaşımınızı açıklayan anlamlı yorumlar ekleyin
- Kodunuzu hatasız çalıştığından emin olmak için test edin
- Modern JavaScript sözdizimini uygulayın (const/let, ok fonksiyonları)
Yaratıcı İfade:
- Bir Canvas API özelliğine odaklanın ancak derinlemesine keşfedin
- Projeyi kişisel hale getirmek için kendi yaratıcı dokunuşunuzu ekleyin
- Yaratımınızın daha büyük bir uygulamanın veya oyunun parçası olabileceğini düşünün
Teslim Yönergeleri
Tamamlanmış projenizi, CSS ve JavaScript gömülü bir HTML dosyası olarak veya ayrı dosyalar halinde bir klasör içinde teslim edin. Yaratıcı seçimlerinizi ve keşfettiğiniz Canvas API özelliklerini açıklayan kısa bir yorum ekleyin.
Değerlendirme Ölçütleri
| Kriter | Mükemmel | Yeterli | Geliştirme Gerekli |
|---|---|---|---|
| Teknik Uygulama | Canvas API yaratıcı bir şekilde birden fazla özellik ile kullanılmış, kod kusursuz çalışıyor, modern JavaScript sözdizimi uygulanmış | Canvas API doğru kullanılmış, kod küçük sorunlarla çalışıyor, temel uygulama | Canvas API denenmiş ancak kodda hatalar var veya çalışmıyor |
| Yaratıcılık ve Tasarım | Son derece özgün konsept, görsel olarak etkileyici, seçilen Canvas özelliği derinlemesine keşfedilmiş | İyi bir Canvas özelliği kullanımı, bazı yaratıcı öğelerle sağlam görsel sonuç | Temel uygulama, minimum yaratıcılık veya görsel çekicilik |
| Kod Kalitesi | İyi organize edilmiş, yorumlanmış kod, en iyi uygulamalara uygun, verimli algoritmalar | Temiz kod, bazı yorumlar, temel kodlama standartlarına uygun | Kodda organizasyon eksikliği, minimum yorum, verimsiz uygulama |
Yansıtma Soruları
Projenizi tamamladıktan sonra şu soruları düşünün:
- Hangi Canvas API özelliğini seçtiniz ve neden?
- Projenizi oluştururken hangi zorluklarla karşılaştınız?
- Bu projeyi daha büyük bir uygulama veya oyuna nasıl genişletebilirsiniz?
- Bir sonraki keşfetmek istediğiniz diğer Canvas API özellikleri nelerdir?
💡 İpucu: Basit başlayın ve kademeli olarak karmaşıklık ekleyin. İyi uygulanmış basit bir proje, düzgün çalışmayan aşırı iddialı bir projeden daha iyidir!
Feragatname:
Bu belge, AI çeviri hizmeti Co-op Translator kullanılarak çevrilmiştir. Doğruluk için çaba göstersek de, otomatik çevirilerin hata veya yanlışlıklar içerebileceğini lütfen unutmayın. Belgenin orijinal dili, yetkili kaynak olarak kabul edilmelidir. Kritik bilgiler için profesyonel insan çevirisi önerilir. Bu çevirinin kullanımından kaynaklanan yanlış anlamalar veya yanlış yorumlamalar için sorumluluk kabul etmiyoruz.