Latihan buat 17 Menggambar di Canvas. Butuh elemen
<canvas>dan konteks 2D. Konsep: path, arc, warna, dan animasi. Jawaban di 17 Kunci Jawaban Canvas.
17.1 Bentuk
Gambar beberapa bentuk: trapesium, berlian (persegi diputar 45°), zigzag, spiral, dan bintang.
Kode awal (HTML):
<canvas width="600" height="200"></canvas>
<script>
let cx = document.querySelector("canvas").getContext("2d");
// tulis kodemu di sini
</script>Petunjuk: semua dari beginPath + moveTo/lineTo + fill/stroke. Trapesium: empat titik. Berlian: pakai rotate atau empat titik diagonal. Zigzag/spiral: loop yang menambah lineTo dengan koordinat dihitung (spiral: sudut dan jari-jari naik bersama pakai sin/cos). Bintang: loop sudut dengan titik luar dan dalam bergantian. Konsep di 17 Menggambar di Canvas > Path.
→ Jawaban: 17 Kunci Jawaban Canvas > 17.1 Bentuk
17.2 Bagan Pai
Gambar pie chart dari data (label + nilai + warna).
Kode awal:
let data = [
{nama: "A", jumlah: 30, warna: "tomato"},
{nama: "B", jumlah: 20, warna: "gold"},
{nama: "C", jumlah: 50, warna: "skyblue"}
];Petunjuk: hitung total. Untuk tiap potongan, gambar arc dari sudut sebelumnya ke sudut + (jumlah/total) * 2π, dengan moveTo ke pusat dulu, lalu fill warnanya. Sudut dalam radian. Konsep di 17 Menggambar di Canvas > Kurva.
→ Jawaban: 17 Kunci Jawaban Canvas > 17.2 Bagan Pai
17.3 Bola Memantul
Animasikan bola yang memantul di dalam kotak.
Petunjuk: requestAnimationFrame; tiap frame clearRect lalu gambar kotak dan lingkaran (arc) di posisi bola. Simpan posisi dan kecepatan; tiap langkah tambahkan kecepatan ke posisi, dan balik tanda kecepatan waktu menyentuh dinding (per sumbu). Konsep di 17 Menggambar di Canvas > Transformasi dan fisika per-sumbu di 16 Proyek Game Platform > Gerak dan Tabrakan.
→ Jawaban: 17 Kunci Jawaban Canvas > 17.3 Bola Memantul