59 Sebelum itu kita gunakan css untuk membuat garis tepi dan warna background dengan menambahkan body{ background-color:white; } dan #canvas{border:3px solid green; } pada bagian <style>. Selanjutnya kita masuk pada bagian javascrip yang berfungsi sebagai alat untuk menampilkan sesuatu di canvas. Pada bagian awal kita gunakan window.onload=(function(){..} yang berfungsi ketika program di run maka perintah yang ada didalam kurung kerawal akan di eksekusi secara otomatis. Seperti penjelasan diawal bahwa kita akan mencoba menampilkan sebuah lingkaran dengan interval tertentu maka pertama-tama kita gunakan var canvas = document.getElementById("canvas"); dan var ctx=canvas.getContext("2d");. Kemudian kita sediakan sebuah fungsi untuk membaca ukuran tinggi dan lebar dari canvas yang digunakan dengan tag var cw=canvas.width; dan var ch=canvas.height;. Selanjutnya kita akan tentukan waktu mulai animasi dan durasinya dengan menggunakan var nextTime=0; dimana waktu dimulai dari nilai 0 dan untuk durasi var duration=1000;. Tahapan berkutnya adalah membuat tag var x=30; yang berfungsi untuk menentukan titik x mulainya menggambar lingkaran dan nanti nilai ini akan dilakukan penambahan secara otomatis ketika proses menampilkan lingkaran telah selesai dengan cara menambahkan x+=60;. Selanjutnya kita tambahkan code yang berfungsi untuk memulai animasi requestAnimationFrame(animate); dimana disini
RkJQdWJsaXNoZXIy MTM3NDc5MQ==