Đồng hồ vải
Trong các chương này, chúng ta sẽ xây dựng một đồng hồ tương tự bằng cách sử dụng canvas HTML.
Phần I - Tạo Canvas
Đồng hồ cần một vùng chứa HTML. Tạo một canvas HTML:
Mã HTML:
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="400"
height="400" style="background-color:#333"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var 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>
Giải thích mã
Thêm một 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 (var canvas) từ phần tử canvas HTML:
var canvas =
document.getElementById("canvas");
Tạo đối tượng vẽ 2d (var ctx) cho đối tượng canvas:
var ctx = canvas.getContext("2d");
Tính bán kính đồng hồ, sử dụng chiều cao của bức tranh:
var radius
= canvas.height / 2;
Sử dụng chiều cao canvas để tính bán kính đồng hồ, làm cho đồng hồ hoạt động với mọi kích thước canvas.
Sửa lại vị trí (0,0) (của đối tượng vẽ) vào tâm của canvas:
ctx.translate(radius, radius);
Giảm bán kính đồng hồ (xuống 90%) để vẽ đồng hồ bên trong canvas:
radius = radius * 0.90;
Tạo một hàm để vẽ đồng hồ:
function drawClock() {
ctx.arc(0, 0, radius, 0 , 2 * Math.PI);
ctx.fillStyle =
"white";
ctx.fill();
}