Dalam artikel Genius Corner siri kedua, kita telah belajar asas elemen <canvas> yang diperkenal menerusi HTML 5. Kali ini, kita akan mendalami lagi kehebatan elemen ini yang membolehkan kita mengurangkan kebergantungan kepada Java Script.

Dalam artikel kali ini, kita akan pelajari kaedah membina sebuah jam analog yang lengkap dengan muka jam bernombor, jarum saat, jarum minit, serta jarum jam. Artikel ini membuktikan bahawa elemen <canvas> tidak statik, malah sangat dinamik dan versatil.

Tanpa membuang masa, mari kita mulakan latihan minggu ini.

Semakan

Di dalam kod atur cara tadi, kita telah menghasilkan beberapa fungsi yang memegang tugas berbeza dalam memaparkan jam analog.

Latihan ini dimulakan dengan fungsi drawClock () yang dipanggil menggunakan method setInterval setiap saat sekali. Menerusi drawClock (), tiga lagi fungsi dipanggil dan diperbaharui setiap saat iaitu drawFace(), drawNumbers() dan drawTime().

Fungsi drawFace() bertugas melukis muka jam bulat berlatar belakang putih. Fungsi drawTime() pula bertugas menulis nombor dari 1 hingga 12 pada kedudukan tertentu di atas permukaan jam.

Akhir sekali, fungsi drawTime() bertugas melukis jarum jam saat, minit dan jam pada kedudukan yang tepat dengan memanggil fungsi drawHands ().