4.8 KiB
Tugasan: Terokai API Canvas
Objektif Pembelajaran
Dengan menyelesaikan tugasan ini, anda akan menunjukkan pemahaman asas API Canvas dan menerapkan penyelesaian masalah secara kreatif untuk membina elemen visual menggunakan JavaScript dan HTML5 canvas.
Arahan
Pilih satu aspek API Canvas yang menarik minat anda dan cipta projek visual yang menarik berdasarkan aspek tersebut. Tugasan ini menggalakkan anda untuk bereksperimen dengan keupayaan melukis yang telah anda pelajari sambil membina sesuatu yang unik.
Idea Projek untuk Inspirasi
Corak Geometri:
- Cipta galaksi bintang berkelip yang dianimasikan menggunakan kedudukan rawak
- Reka tekstur menarik menggunakan bentuk geometri yang berulang
- Bina kesan kaleidoskop dengan corak berwarna-warni yang berputar
Elemen Interaktif:
- Bangunkan alat lukisan yang bertindak balas kepada pergerakan tetikus
- Laksanakan bentuk yang berubah warna apabila diklik
- Reka gelung animasi ringkas dengan elemen bergerak
Grafik Berkaitan Permainan:
- Cipta latar belakang bergulir untuk permainan angkasa
- Bina kesan partikel seperti letupan atau sihir
- Cipta sprite animasi dengan beberapa bingkai
Garis Panduan Pembangunan
Penyelidikan dan Inspirasi:
- Layari CodePen untuk contoh canvas yang kreatif (untuk inspirasi, bukan meniru)
- Kajian dokumentasi Canvas API untuk kaedah tambahan
- Eksperimen dengan fungsi lukisan, warna, dan animasi yang berbeza
Keperluan Teknikal:
- Gunakan tetapan canvas yang betul dengan
getContext('2d') - Sertakan komen bermakna yang menerangkan pendekatan anda
- Uji kod anda dengan teliti untuk memastikan ia berjalan tanpa ralat
- Terapkan sintaks JavaScript moden (const/let, fungsi anak panah)
Ekspresi Kreatif:
- Fokus pada satu ciri API Canvas tetapi terokai secara mendalam
- Tambahkan sentuhan kreatif anda sendiri untuk menjadikan projek lebih peribadi
- Pertimbangkan bagaimana ciptaan anda boleh menjadi sebahagian daripada aplikasi atau permainan yang lebih besar
Garis Panduan Penyerahan
Serahkan projek yang telah siap sebagai satu fail HTML dengan CSS dan JavaScript yang disertakan, atau sebagai fail berasingan dalam satu folder. Sertakan komen ringkas yang menerangkan pilihan kreatif anda dan ciri API Canvas yang telah anda terokai.
Rubrik
| Kriteria | Cemerlang | Memadai | Perlu Penambahbaikan |
|---|---|---|---|
| Pelaksanaan Teknikal | API Canvas digunakan secara kreatif dengan pelbagai ciri, kod berjalan dengan sempurna, sintaks JavaScript moden diterapkan | API Canvas digunakan dengan betul, kod berjalan dengan isu kecil, pelaksanaan asas | API Canvas dicuba tetapi kod mempunyai ralat atau tidak berfungsi |
| Kreativiti dan Reka Bentuk | Konsep yang sangat asli dengan daya tarikan visual yang kemas, menunjukkan penerokaan mendalam ciri Canvas yang dipilih | Penggunaan ciri Canvas yang baik dengan beberapa elemen kreatif, hasil visual yang kukuh | Pelaksanaan asas dengan kreativiti atau daya tarikan visual yang minimum |
| Kualiti Kod | Kod yang teratur, dikomen dengan baik mengikut amalan terbaik, algoritma yang cekap | Kod yang bersih dengan beberapa komen, mengikuti standard asas pengekodan | Kod kurang teratur, komen minimum, pelaksanaan tidak cekap |
Soalan Refleksi
Selepas menyelesaikan projek anda, pertimbangkan soalan-soalan ini:
- Ciri API Canvas mana yang anda pilih dan mengapa?
- Cabaran apa yang anda hadapi semasa membina projek anda?
- Bagaimana anda boleh mengembangkan projek ini menjadi aplikasi atau permainan yang lebih besar?
- Ciri API Canvas lain apa yang anda ingin terokai seterusnya?
💡 Tip Profesional: Mulakan dengan sesuatu yang mudah dan tambahkan kerumitan secara beransur-ansur. Projek mudah yang dilaksanakan dengan baik adalah lebih baik daripada projek yang terlalu bercita-cita tinggi tetapi tidak berfungsi dengan betul!
Penafian:
Dokumen ini telah diterjemahkan menggunakan perkhidmatan terjemahan AI Co-op Translator. Walaupun kami berusaha untuk ketepatan, sila ambil perhatian bahawa terjemahan automatik mungkin mengandungi kesilapan atau ketidaktepatan. Dokumen asal dalam bahasa asalnya harus dianggap sebagai sumber yang berwibawa. Untuk maklumat penting, terjemahan manusia profesional adalah disyorkan. Kami tidak bertanggungjawab atas sebarang salah faham atau salah tafsir yang timbul daripada penggunaan terjemahan ini.