Đồng hồ vải
Trong các chương này, chúng ta sẽ xây dựng một đồng hồ analog bằng cách sử dụng HTML canvas.
Phần I - Tạo Canvas
Đồng hồ cần một thùng chứa HTML. Tạo một 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>
Hãy tự mình thử »Giải thích mã
Thêm phần tử HTML <canvas> vào trang của bạn:
<canvas id="canvas" width="400"
height="400" style="background-color:#333"></canvas>
Tạo một đối tượng canvas (const canvas) phần tử canvas HTML:
const canvas = document.getElementById("canvas");
Tạo đối tượng vẽ 2d (const ctx) cho đối tượng canvas:
const ctx = canvas.getContext("2d");
Tính bán kính đồng hồ, sử dụng chiều cao của khung vẽ:
let radius
= canvas.height / 2;
Ghi chú
Sử dụng chiều cao canvas để tính bán kính đồng hồ, giúp đồng hồ hoạt động với mọi kích thước canvas.
Ánh xạ lại vị trí (0,0) (của đối tượng vẽ) vào giữa khung vẽ:
ctx.translate(radius, radius);
Giảm bán kính đồng hồ (xuống 90%) để vẽ đồng hồ bên 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();
}