Phần 4 - Vẽ kim đồng hồ
...Tiếp theo, Bài này mình sẽ hướng dẫn cách làm thế nào để raw được những chiếc kim chỉ giờ, phút, giây trên mặt đồng hồ.
Bước đầu tiên, tạo một hàm JavaScript như code bên dưới:
Bước đầu tiên, tạo một hàm JavaScript như code bên dưới:
JavaScript:
function drawClock() {
drawFace(ctx, radius);
drawNumbers(ctx, radius);
drawTime(ctx, radius);}
function drawTime(ctx, radius){
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
//hour hour=hour%12;
hour=(hour*Math.PI/6)+(minute*Math.PI/(6*60))+(second*Math.PI/(360*60));
drawHand(ctx, hour, radius*0.5, radius*0.07);
//minute minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
drawHand(ctx, minute, radius*0.8, radius*0.07);
// second second=(second*Math.PI/30);
drawHand(ctx, second, radius*0.9, radius*0.02);
}
function drawHand(ctx, pos, length, width) {
ctx.beginPath();
ctx.lineWidth = width;
ctx.lineCap = "round";
ctx.moveTo(0,0);
ctx.rotate(pos);
ctx.lineTo(0, -length);
ctx.stroke();
ctx.rotate(-pos);
}
Giải thích code trên:
Sử dụng hàm Date để lấy giờ, phút, giây của hệ thống:
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
Tính toán góc của kim giờ, và vẽ nó với độ dài bằng 50% của bán kính, và chiều rộng bằng 7% của bán kính đồng hồ:
hour=hour%12;
hour=(hour*Math.PI/6)+(minute*Math.PI/(6*60))+(second*Math.PI/(360*60));
drawHand(ctx, hour, radius*0.5, radius*0.07);
Sử dụng cùng kỹ thuật trên cho kim phút và kim giây.
Trong hàm drawHand() chứa các hàm và và thuộc tính chúng ta đã được học, do đó mình sẽ không cần phải giải thích thêm. Nó đơn giản chỉ vẽ một đường thẳng với chiều dài và chiều rộng đã cho.
