# 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](https://developer.mozilla.org/docs/Web/API/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: 1. **Ciri API Canvas mana yang anda pilih dan mengapa?** 2. **Cabaran apa yang anda hadapi semasa membina projek anda?** 3. **Bagaimana anda boleh mengembangkan projek ini menjadi aplikasi atau permainan yang lebih besar?** 4. **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](https://github.com/Azure/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.