การเริ่มใช้ Canvas นาฬิกา

ส่วนที่ห้า - เริ่มต้นนาฬิกา

เพื่อเริ่มต้นนาฬิกา รับเรียกฟังก์ชัน drawClock ทุกช่วงเวลาที่กำหนด

JavaScript:

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
//drawClock();
setInterval(drawClock, 1000);

ลองทดลองด้วยตัวเอง

การอธิบายรหัส

สิ่งที่คุณต้องทำเพียงเดียว (เริ่มต้นนาฬิกา) คือเรียกฟังก์ชัน drawClock ทุกช่วงเวลาในช่วงที่กำหนด

ใช้:

setInterval(drawClock, 1000);

แทนที่ด้วย:

drawClock();

หมายเหตุ: ช่วงเวลาแบบมิลลิเซกันด์ ทุก 1000 มิลลิเซกันด์จะเรียกใช้ drawClock() ครั้งหนึ่ง

ดูเพิ่มเติม:

คู่มือเต็ม HTML Canvas ของ CodeW3C.com