64 Pada bagian fungsi button terlebih dahulu kita memilih elemen canvas dengan menambahkan code var canvas = document.getElementById("canvas"); dan var ctx = canvas.getContext("2d");. Disini kita juga butuh unutk menentukan ukuran dari canvas yang digunakan dengan code var cw=canvas.width; untuk lebar dan var ch=canvas.height; tinggi canvas. Selanjutnya kita memulai animasi dengan menambahkan requestAnimationFrame(animate); dimana code memanggil fungsi animate yang berarti kita juga harus sediakan fungsi yang dipanggil menggunakan tag function animate(currentTime) {..} Pada tag function animate akan ada proses untuk memunculkan persegi secara random dengan menentukan tinggi dan lebar dari persegi tersebut menggunakan code var x = Math.random() * canvas.width; dan var y = Math.random() * canvas.height;. Bagian terakhir kita akan menggambar ukuran dari pesegi dengan ctx.fillRect(x,y,30,30); dan memberikan warna secara random juga dengan ctx.fillStyle = '#' + Math.floor(Math.random() * 16777215).toString(16); Bagian penutup kita tambahakan requestAnimationFrame(animate); untuk looping animasi yang lainnya. Berikut ini hasil dari code yang kita bahas. Pada output ini ketika awal di run canvas akan kosong dan ketika mulai klik button Lihat Animasi maka secara otomatis muncul persegi pada canvas dengan titik x dan y random beserta warna dari kotak tersebut juga muncul secara random yang hamper sama dengan percobaan lingkaran sebelumnya.
RkJQdWJsaXNoZXIy MTM3NDc5MQ==