Hướng dẫn tạo đồng hồ Analog với hiển thị Digital bằng HTML5 Canvas & JavaScript

Admin

Jul 12, 2025

2 phút đọc

583

CodeTutHub xin giới thiệu đến bạn một dự án nhỏ nhưng rất thú vị: tạo một đồng hồ analog hiển thị thời gian thực, kết hợp cả đồng hồ kim (canvas) và đồng hồ số (digital), được thiết kế thẩm mỹ với TailwindCSS và khả năng responsive theo kích thước màn hình.

✅ Mục tiêu: Hiển thị đồng hồ analog dạng tròn với các kim giờ, phút, giây chuyển động mượt mà, có logo “CodeTutHub” và đồng hồ số bên dưới.

🎯 Kết quả mong đợi

"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" \/>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\n  <title>CodeTutHub - Analog Clock<\/title>\n  <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n  <style>\n    body {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      min-height: 100vh;\n      background-color: #f0f4f8;\n      font-family: 'Inter', sans-serif;\n      margin: 0;\n      overflow: hidden;\n    }\n    canvas {\n      background-color: #ffffff;\n      border: 2px solid #333;\n      border-radius: 50%;\n      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);\n      display: block;\n      margin: 20px auto;\n      max-width: 90vw;\n      max-height: 90vh;\n    }\n    #digital-display {\n      font-size: 2.5rem;\n      font-weight: bold;\n      color: #333;\n      margin-top: 30px;\n      text-align: center;\n    }\n  <\/style>\n<\/head>\n<body>\n  <div class=\"flex flex-col items-center p-4\">\n    <canvas id=\"analogClockCanvas\"><\/canvas>\n    <div id=\"digital-display\" class=\"rounded-lg p-3 bg-gray-100 shadow-inner\"><\/div>\n  <\/div>\n\n  <script>\n    const canvas = document.getElementById('analogClockCanvas');\n    const ctx = canvas.getContext('2d');\n    const digitalDisplay = document.getElementById('digital-display');\n\n    let size = Math.min(window.innerWidth * 0.7, window.innerHeight * 0.7, 400);\n    canvas.width = size;\n    canvas.height = size;\n\n    let centerX = canvas.width \/ 2;\n    let centerY = canvas.height \/ 2;\n    let radius = (canvas.width \/ 2) * 0.9;\n\n    function drawClockFace() {\n      ctx.beginPath();\n      ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);\n      ctx.strokeStyle = '#333';\n      ctx.lineWidth = 2;\n      ctx.stroke();\n      ctx.closePath();\n\n      ctx.beginPath();\n      ctx.arc(centerX, centerY, radius * 0.03, 0, Math.PI * 2);\n      ctx.fillStyle = '#333';\n      ctx.fill();\n      ctx.closePath();\n\n      ctx.font = `${radius * 0.15}px 'Inter', sans-serif`;\n      ctx.textAlign = 'center';\n      ctx.textBaseline = 'middle';\n      ctx.fillStyle = '#333';\n\n      for (let i = 1; i <= 12; i++) {\n        const angle = (i * Math.PI \/ 6) - (Math.PI \/ 2);\n        const x = centerX + radius * 0.85 * Math.cos(angle);\n        const y = centerY + radius * 0.85 * Math.sin(angle);\n        ctx.fillText(i.toString(), x, y);\n      }\n\n      drawLogo();\n    }\n\n    function drawLogo() {\n      ctx.font = `${radius * 0.13}px 'Inter', sans-serif`;\n      ctx.fillStyle = '#1e293b'; \/\/ Tailwind's slate-800\n      ctx.textAlign = 'center';\n      ctx.fillText('CodeTutHub', centerX, centerY + radius * 0.5);\n    }\n\n    function drawHand(angle, length, width, color) {\n      ctx.beginPath();\n      ctx.moveTo(centerX, centerY);\n      const x = centerX + length * radius * Math.cos(angle);\n      const y = centerY + length * radius * Math.sin(angle);\n      ctx.lineTo(x, y);\n      ctx.strokeStyle = color;\n      ctx.lineWidth = width;\n      ctx.lineCap = 'round';\n      ctx.stroke();\n      ctx.closePath();\n    }\n\n    function updateClock() {\n      ctx.clearRect(0, 0, canvas.width, canvas.height);\n      drawClockFace();\n\n      const now = new Date();\n      let hours = now.getHours();\n      const minutes = now.getMinutes();\n      const seconds = now.getSeconds();\n\n      const hourAngle = ((hours % 12) * Math.PI \/ 6) + (minutes * Math.PI \/ (6 * 60)) + (seconds * Math.PI \/ (360 * 60)) - (Math.PI \/ 2);\n      const minuteAngle = (minutes * Math.PI \/ 30) + (seconds * Math.PI \/ (30 * 60)) - (Math.PI \/ 2);\n      const secondAngle = (seconds * Math.PI \/ 30) - (Math.PI \/ 2);\n\n      drawHand(hourAngle, 0.5, 6, '#333');\n      drawHand(minuteAngle, 0.75, 4, '#333');\n      drawHand(secondAngle, 0.8, 2, 'red');\n\n      const formattedHours = hours.toString().padStart(2, '0');\n      const formattedMinutes = minutes.toString().padStart(2, '0');\n      const formattedSeconds = seconds.toString().padStart(2, '0');\n      digitalDisplay.textContent = `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;\n\n      requestAnimationFrame(updateClock);\n    }\n\n    window.addEventListener('resize', () => {\n      size = Math.min(window.innerWidth * 0.7, window.innerHeight * 0.7, 400);\n      canvas.width = size;\n      canvas.height = size;\n      centerX = canvas.width \/ 2;\n      centerY = canvas.height \/ 2;\n      radius = (canvas.width \/ 2) * 0.9;\n      updateClock();\n    });\n\n    window.onload = function () {\n      updateClock();\n    };\n  <\/script>\n<\/body>\n<\/html>\n"

html

Thử online

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>CodeTutHub - Analog Clock</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: #f0f4f8;
      font-family: 'Inter', sans-serif;
      margin: 0;
      overflow: hidden;
    }
    canvas {
      background-color: #ffffff;
      border: 2px solid #333;
      border-radius: 50%;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
      display: block;
      margin: 20px auto;
      max-width: 90vw;
      max-height: 90vh;
    }
    #digital-display {
      font-size: 2.5rem;
      font-weight: bold;
      color: #333;
      margin-top: 30px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="flex flex-col items-center p-4">
    <canvas id="analogClockCanvas"></canvas>
    <div id="digital-display" class="rounded-lg p-3 bg-gray-100 shadow-inner"></div>
  </div>

  <script>
    const canvas = document.getElementById('analogClockCanvas');
    const ctx = canvas.getContext('2d');
    const digitalDisplay = document.getElementById('digital-display');

    let size = Math.min(window.innerWidth * 0.7, window.innerHeight * 0.7, 400);
    canvas.width = size;
    canvas.height = size;

    let centerX = canvas.width / 2;
    let centerY = canvas.height / 2;
    let radius = (canvas.width / 2) * 0.9;

    function drawClockFace() {
      ctx.beginPath();
      ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
      ctx.strokeStyle = '#333';
      ctx.lineWidth = 2;
      ctx.stroke();
      ctx.closePath();

      ctx.beginPath();
      ctx.arc(centerX, centerY, radius * 0.03, 0, Math.PI * 2);
      ctx.fillStyle = '#333';
      ctx.fill();
      ctx.closePath();

      ctx.font = `${radius * 0.15}px 'Inter', sans-serif`;
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fillStyle = '#333';

      for (let i = 1; i <= 12; i++) {
        const angle = (i * Math.PI / 6) - (Math.PI / 2);
        const x = centerX + radius * 0.85 * Math.cos(angle);
        const y = centerY + radius * 0.85 * Math.sin(angle);
        ctx.fillText(i.toString(), x, y);
      }

      drawLogo();
    }

    function drawLogo() {
      ctx.font = `${radius * 0.13}px 'Inter', sans-serif`;
      ctx.fillStyle = '#1e293b'; // Tailwind's slate-800
      ctx.textAlign = 'center';
      ctx.fillText('CodeTutHub', centerX, centerY + radius * 0.5);
    }

    function drawHand(angle, length, width, color) {
      ctx.beginPath();
      ctx.moveTo(centerX, centerY);
      const x = centerX + length * radius * Math.cos(angle);
      const y = centerY + length * radius * Math.sin(angle);
      ctx.lineTo(x, y);
      ctx.strokeStyle = color;
      ctx.lineWidth = width;
      ctx.lineCap = 'round';
      ctx.stroke();
      ctx.closePath();
    }

    function updateClock() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawClockFace();

      const now = new Date();
      let hours = now.getHours();
      const minutes = now.getMinutes();
      const seconds = now.getSeconds();

      const hourAngle = ((hours % 12) * Math.PI / 6) + (minutes * Math.PI / (6 * 60)) + (seconds * Math.PI / (360 * 60)) - (Math.PI / 2);
      const minuteAngle = (minutes * Math.PI / 30) + (seconds * Math.PI / (30 * 60)) - (Math.PI / 2);
      const secondAngle = (seconds * Math.PI / 30) - (Math.PI / 2);

      drawHand(hourAngle, 0.5, 6, '#333');
      drawHand(minuteAngle, 0.75, 4, '#333');
      drawHand(secondAngle, 0.8, 2, 'red');

      const formattedHours = hours.toString().padStart(2, '0');
      const formattedMinutes = minutes.toString().padStart(2, '0');
      const formattedSeconds = seconds.toString().padStart(2, '0');
      digitalDisplay.textContent = `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;

      requestAnimationFrame(updateClock);
    }

    window.addEventListener('resize', () => {
      size = Math.min(window.innerWidth * 0.7, window.innerHeight * 0.7, 400);
      canvas.width = size;
      canvas.height = size;
      centerX = canvas.width / 2;
      centerY = canvas.height / 2;
      radius = (canvas.width / 2) * 0.9;
      updateClock();
    });

    window.onload = function () {
      updateClock();
    };
  </script>
</body>
</html>

🧱 Bước 1: Khởi tạo File HTML cơ bản

Chúng ta bắt đầu với một file HTML chuẩn có cấu trúc như sau:

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>CodeTutHub - Analog Clock</title>
  <script src="https://cdn.tailwindcss.com"></script>
  ...
</head>
<body>
  ...
</body>
</html>

🎨 Bước 2: Thiết kế giao diện với TailwindCSS

Chúng ta sử dụng Tailwind để căn giữa nội dung và tạo nền sáng. Bên trong thân trang, có:

Một thẻ <canvas> để vẽ đồng hồ analog.
Một <div> hiển thị thời gian digital.

html

<div class="flex flex-col items-center p-4">
  <canvas id="analogClockCanvas"></canvas>
  <div id="digital-display" class="rounded-lg p-3 bg-gray-100 shadow-inner"></div>
</div>

css

canvas {
  background-color: #ffffff;
  border: 2px solid #333;
  border-radius: 50%;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  display: block;
  margin: 20px auto;
  max-width: 90vw;
  max-height: 90vh;
}

🧠 Bước 3: Logic JavaScript – Vẽ và cập nhật đồng hồ

✅ Cấu hình ban đầu

const canvas = document.getElementById('analogClockCanvas');
const ctx = canvas.getContext('2d');
const digitalDisplay = document.getElementById('digital-display');

let size = Math.min(window.innerWidth * 0.7, window.innerHeight * 0.7, 400);
canvas.width = size;
canvas.height = size;

✅ Vẽ mặt đồng hồ

function drawClockFace() {
  ctx.beginPath();
  ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
  ctx.strokeStyle = '#333';
  ctx.lineWidth = 2;
  ctx.stroke();
  ctx.closePath();

  // Tâm đồng hồ
  ctx.beginPath();
  ctx.arc(centerX, centerY, radius * 0.03, 0, Math.PI * 2);
  ctx.fillStyle = '#333';
  ctx.fill();
  ctx.closePath();

  // Số giờ
  ctx.font = `${radius * 0.15}px 'Inter', sans-serif`;
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillStyle = '#333';

  for (let i = 1; i <= 12; i++) {
    const angle = (i * Math.PI / 6) - (Math.PI / 2);
    const x = centerX + radius * 0.85 * Math.cos(angle);
    const y = centerY + radius * 0.85 * Math.sin(angle);
    ctx.fillText(i.toString(), x, y);
  }

  drawLogo();
}

✅ Thêm Logo “CodeTutHub”

function drawLogo() {
  ctx.font = `${radius * 0.13}px 'Inter', sans-serif`;
  ctx.fillStyle = '#1e293b'; // slate-800
  ctx.textAlign = 'center';
  ctx.fillText('CodeTutHub', centerX, centerY + radius * 0.5);
}

✅ Vẽ kim đồng hồ

function drawHand(angle, length, width, color) {
  ctx.beginPath();
  ctx.moveTo(centerX, centerY);
  const x = centerX + length * radius * Math.cos(angle);
  const y = centerY + length * radius * Math.sin(angle);
  ctx.lineTo(x, y);
  ctx.strokeStyle = color;
  ctx.lineWidth = width;
  ctx.lineCap = 'round';
  ctx.stroke();
  ctx.closePath();
}

🕒 Bước 4: Cập nhật thời gian liên tục

Chúng ta tính toán góc xoay dựa trên Date():

function updateClock() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawClockFace();

  const now = new Date();
  let hours = now.getHours();
  const minutes = now.getMinutes();
  const seconds = now.getSeconds();

  const hourAngle = ((hours % 12) * Math.PI / 6) + (minutes * Math.PI / (6 * 60)) + (seconds * Math.PI / (360 * 60)) - (Math.PI / 2);
  const minuteAngle = (minutes * Math.PI / 30) + (seconds * Math.PI / (30 * 60)) - (Math.PI / 2);
  const secondAngle = (seconds * Math.PI / 30) - (Math.PI / 2);

  drawHand(hourAngle, 0.5, 6, '#333');
  drawHand(minuteAngle, 0.75, 4, '#333');
  drawHand(secondAngle, 0.8, 2, 'red');

  const formattedHours = hours.toString().padStart(2, '0');
  const formattedMinutes = minutes.toString().padStart(2, '0');
  const formattedSeconds = seconds.toString().padStart(2, '0');
  digitalDisplay.textContent = `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;

  requestAnimationFrame(updateClock);
}

📱 Bước 5: Hỗ trợ Responsive

window.addEventListener('resize', () => {
  size = Math.min(window.innerWidth * 0.7, window.innerHeight * 0.7, 400);
  canvas.width = size;
  canvas.height = size;
  centerX = canvas.width / 2;
  centerY = canvas.height / 2;
  radius = (canvas.width / 2) * 0.9;
  updateClock();
});

window.onload = function () {
  updateClock();
};

📦 Tổng kết

Chỉ với một chút HTML, CSS và JavaScript thuần, bạn đã có thể tạo ra một đồng hồ analog đầy đủ chức năng, hiển thị thời gian thực và tương thích với mọi kích thước màn hình.

💡 Bạn có thể mở rộng thêm các tính năng:

Đổi theme sáng/tối
Hiển thị múi giờ
Tùy chỉnh logo, font, màu sắc...

Hy vọng bạn học được điều gì đó mới từ bài viết này! Nếu thấy hữu ích, hãy chia sẻ bài viết và theo dõi CodeTutHub.com để cập nhật thêm nhiều hướng dẫn lập trình thú vị nhé!

Toàn NguyễnTác giả

Tác giả tại CodeTutHub

Xin chào, mình là Toàn 👋
Là Senior Full-Stack Developer ở HCM, đồng thời là người đứng sau CodeTutHub. Mình viết về những gì mình thực sự dùng hàng ngày — từ Laravel, Next.js, đến cách workflow lập trình với AI agents như Claude Code và Cursor.
Nếu bạn thấy bài này hữu ích, hãy subscribe newsletter hoặc kết nối với mình. Mình luôn sẵn sàng thảo luận về dự án thú vị, cơ hội remote, hoặc đơn giản là chat về tech.
Ho Chi Minh City · Open for collaboration

Xem hồ sơ

0 Bình luận

Chưa có bình luận nào. Hãy là người đầu tiên!

Hướng dẫn tạo đồng hồ Analog với hiển thị Digital bằng HTML5 Canvas & JavaScript

🎯 Kết quả mong đợi

🧱 Bước 1: Khởi tạo File HTML cơ bản

🎨 Bước 2: Thiết kế giao diện với TailwindCSS

🧠 Bước 3: Logic JavaScript – Vẽ và cập nhật đồng hồ

✅ Cấu hình ban đầu

✅ Vẽ mặt đồng hồ

✅ Thêm Logo “CodeTutHub”

✅ Vẽ kim đồng hồ

🕒 Bước 4: Cập nhật thời gian liên tục

📱 Bước 5: Hỗ trợ Responsive

📦 Tổng kết

0 Bình luận

Mục lục