Đồng hồ Canvas

Trong các phần tiếp theo, chúng ta sẽ xây dựng một đồng hồ mô phỏng bằng khung vẽ HTML.

Phần 1 - Tạo khung vẽ

Đồng hồ cần một bộ chứa HTML. Tạo khung vẽ HTML:

Mã HTML:

<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="400" height="400" style="background-color:#333"></canvas>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
drawClock();
function drawClock() {
  ctx.arc(0, 0, radius, 0, 2 * Math.PI);
  ctx.fillStyle = "white";
  ctx.fill();
{}
</script>
</body>
</html>

Thử ngay

Giải thích mã

Thêm thẻ <canvas> HTML vào trang web của bạn:

<canvas id="canvas" width="400" height="400" style="background-color:#333"></canvas>

Tạo một đối tượng khung vẽ (const canvas):

const canvas = document.getElementById("canvas");

Tạo một đối tượng vẽ 2d cho đối tượng khung vẽ (const ctx):

const ctx = canvas.getContext("2d");

Sử dụng chiều cao của khung vẽ để tính bán kính đồng hồ:

let radius = canvas.height / 2;

Lưu ý

Sử dụng chiều cao của khung vẽ để tính bán kính đồng hồ, để đồng hồ phù hợp với kích thước của tất cả các khung vẽ.

Chuyển đổi vị trí (0,0) của đối tượng vẽ lại vị trí trung tâm của khung vẽ:

ctx.translate(radius, radius);

Giảm bán kính đồng hồ (đến 90%), để vẽ đồng hồ trong khung vẽ:

radius = radius * 0.90;

Tạo hàm vẽ đồng hồ:

function drawClock() {
  ctx.arc(0, 0, radius, 0, 2 * Math.PI);
  ctx.fillStyle = "white";
  ctx.fill();
{}

Xin xem thêm:

Hướng dẫn tham khảo đầy đủ Canvas của CodeW3C.com