Trong bài này và những bài tiếp theo mình sẽ hướng dẫn từng bước ví dụ trực quan làm thế nào để xây dựng một chiếc đồng hồ sử dụng hoàn toàn bằng HTML Canvas.
Phần 1 - Tạo Canvas
Đồng hồ cần một khung HTML. Tạo một HTML canvas với kích thước 300 x 300 pixel:
HTML code:
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="300" height="300" 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>
Code được giải thích như sau
Tạo một phần tử HTML <canvas> tới trang của bạn:
<canvas id="canvas" width="300" height="300" style="background-color:#333"></canvas>
Tạo một đối tượng canvas (var canvas) từ phần tử HTML canvas:
var canvas = document.getElementById("canvas");
Tạo một đối tượng vẽ đồ họa 2d (var ctx) cho đối tượng canvas:
var ctx = canvas.getContext("2d");
Tính bán kính của đồng hồ, sử dụng chiều cao của canvas:
var radius = canvas.height / 2;
 | Sử dụng chiều cao canvas để tính toán ra bán kính đồng hồ, điều này nghĩ là làm cho đồng hồ làm việc trên tất cả những kích thước canvas. |
|---|
Dịch chuyển gốc tọa độ (0,0) của đối tượng đồ họa vào giữa của canvas:
ctx.translate(radius, radius);
Giảm bán kính đồng hồ (tới 90%) để vẽ 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();
}
Trương Đức Tài.
