Chỉ số đồng hồ Canvas

Phần 4 - Vẽ kim đồng hồ

Đồng hồ cần có kim. Tạo một hàm JavaScript để vẽ kim đồng hồ:

JavaScript:

function drawClock() {
  drawFace(ctx, radius);
  drawNumbers(ctx, radius);
  drawTime(ctx, radius);
}
function drawTime(ctx, radius) {
  const now = new Date();
  let hour = now.getHours();
  let minute = now.getMinutes();
  let second = now.getSeconds();
  // Giờ
  hour = hour%12;
  hour = (hour*Math.PI/6)+(minute*Math.PI/(6*60))+(second*Math.PI/(360*60));
  drawHand(ctx, hour, radius*0.5, radius*0.07);
  // Phút
  minute = (minute*Math.PI/30)+(second*Math.PI/(30*60));
  drawHand(ctx, minute, radius*0.8, radius*0.07);
  // Giây
  second = (second*Math.PI/30);
  drawHand(ctx, second, radius*0.9, radius*0.02);
}
function drawHand(ctx, pos, length, width) {
  ctx.beginPath();
  ctx.lineWidth = width;
  ctx.lineCap = "round";
  ctx.moveTo(0,0);
  ctx.rotate(pos);
  ctx.lineTo(0, -length);
  ctx.stroke();
  ctx.rotate(-pos);
}

Thử ngay lập tức

Giải thích mã

Tạo một đối tượng Date để lấy giờ, phút, giây:

const now = new Date();
let hour = now.getHours();
let minute = now.getMinutes();
let second = now.getSeconds();

Tính góc của kim giờ và vẽ chiều dài (50% bán kính) và chiều rộng (7% bán kính):

hour = hour%12;
hour = (hour*Math.PI/6)+(minute*Math.PI/(6*60))+(second*Math.PI/(360*60));
drawHand(ctx, hour, radius*0.5, radius*0.07);

Sử dụng công nghệ tương tự để vẽ kim giờ và kim giây.

Hàm drawHand() không cần giải thích. Nó vẽ đường thẳng có độ dài và độ rộng đã cho.

Xin xem thêm:

Sách hướng dẫn tham khảo hoàn chỉnh Canvas của CodeW3C.com