Phần 3 - Vẽ số trên mặt đồng hồ
...tiếp bài trước chúng đã được học cách để tạo ra mặt đồng hồ.
Trong bài này mình sẽ tiếp tục hướng dẫn cách làm thế nào để tạo những con số hiển thị trên mặt đồng hồ. Đầu tiền mình sẽ tạo một hàm JavaScript để vẽ những con số cho đồng hồ như sau:
Trong bài này mình sẽ tiếp tục hướng dẫn cách làm thế nào để tạo những con số hiển thị trên mặt đồng hồ. Đầu tiền mình sẽ tạo một hàm JavaScript để vẽ những con số cho đồng hồ như sau:
JavaScript:
function drawClock() {
drawFace(ctx, radius);
drawNumbers(ctx, radius);
}
function drawNumbers(ctx, radius) {
var ang;
var num;
ctx.font = radius*0.15 + "px arial";
ctx.textBaseline="middle";
ctx.textAlign="center";
for(num= 1; num < 13; num++){
ang = num * Math.PI / 6;
ctx.rotate(ang);
ctx.translate(0, -radius*0.85);
ctx.rotate(-ang);
ctx.fillText(num.toString(), 0, 0);
ctx.rotate(ang);
ctx.translate(0, radius*0.85);
ctx.rotate(-ang);
}
}
Giải thích code trên
Thiết lập kích thước font (của đối tượng cần vẽ) bằng 15% của bán kính đồng hồ:
ctx.font = radius*0.15 + "px arial";
Thiết lập căn chỉnh text tới giữa của vị trí cần hiển thị:
ctx.textBaseline="middle";
ctx.textAlign="center";
Tính toán vị trí cần hiển thị (12 số) tới 85% của bán kính đồng hồ, xoay (PI/6) cho mỗi số:
for(num= 1; num < 13; num++) {
ang = num * Math.PI / 6;
ctx.rotate(ang);
ctx.translate(0, -radius*0.85);
ctx.rotate(-ang);
ctx.fillText(num.toString(), 0, 0);
ctx.rotate(ang);
ctx.translate(0, radius*0.85);
ctx.rotate(-ang);
}
