69 detik jam pada lingkaran. Setelah inisialisai untuk lingkaran sudah selesai kita mulai animasinya dengan menambahkan requestAnimationFrame(animate);. Seperti model program sebelumnya pada code requestAnimationFrame memanggil sebuah fungsi yang bernama animate. Jadi kita harus menyediakan fungsi tersebut. Pada fungsi animate, kita akan membaca jam pada laptop dengan menggunakan var date=new Date();, selanjutnya dari jam tersebut kita akan ambil detikknya dengan menggunakan variable var seconds=date.getSeconds();. Kita gunakan ctx.clearRect(0,0,cw,ch);untuk menghapus lingkaran yang telah terbentuk agar tidak tumpeng tindik ketika animasi ini looping. Kemudian buat lah sebuah lingkaran bagian luar dengan menggunakan code ctx.arc(100,100,75,0,fullCircle); dimana diawali dengan ctx.beginPath(); dan diakhiri dengan code ctx.stroke();. Dengan begitu akan terbentulah sebuah lingkaran dengan warna pinggir hitam dan ketebalan garis 3px. Bagian berikutnya kita akan membuat animasi bergerak pada isian lingkaran sesuai dengan detik jam pada laptop. Kita awali dengan menambah code ctx.beginPath(); dan menambahkan ctx.moveTo(100,100); untuk menentukan titik tengah dari pergerakan animasi. Selanjutnya kita akan membuat gerakan animasi lingkaran dengan warna hijau dengan menambahkan code ctx.arc (100, 100, 75, sa, sa + fullCircle * seconds / 60);. Jangan
RkJQdWJsaXNoZXIy MTM3NDc5MQ==