Phần 2 - Tạo mặt đồng hồ
Đồng hồ đương nhiên cần phải vẽ cho nó một cái mặt hấp dẫn phải không? Trong bài này mình sẽ tiếp tục hướng dẫn cách làm thế nào để xây dựng mặt đồng hồ bằng HTML Canvas. Hàm JavaScript dưới đây sẽ làm việc đó, chúng ta cùng bắt đầu nhé:
JavaScript:
function drawClock() {
drawFace(ctx, radius);
}
function drawFace(ctx, radius) {
var grad;
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2*Math.PI);
ctx.fillStyle = 'white';
ctx.fill();
grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
grad.addColorStop(0, '#333');
grad.addColorStop(0.5, 'white');
grad.addColorStop(1, '#333');
ctx.strokeStyle = grad;
ctx.lineWidth = radius*0.1;
ctx.stroke();
ctx.beginPath();
ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
ctx.fillStyle = '#333';
ctx.fill();
}
Giải thích code trên
Tạo hàm drawFace() để vẽ mặt đồng hồ:
function drawClock() {
drawFace(ctx, radius);
}
function drawFace(ctx, radius) {
}
Vẽ một vòng tròn màu trắng:
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2*Math.PI);
ctx.fillStyle = 'white';
ctx.fill();
Tạo một viền vòng tròn (vòng tròn có biên dày trong khoảng 95% và 105% so với bán kính thực của đồng hồ), để làm được điều này chúng ta làm như sau (các bạn có thể tham khảo thêm ở bài trước chúng ta đã được học):
grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
Tạo 3 điểm dừng màu, tương ứng với trong, giữa và mép ngoài của vòng tròn:
grad.addColorStop(0, '#333');
grad.addColorStop(0.5, 'white');
grad.addColorStop(1, '#333');
 | Mục đích tạo 3 điểm dừng màu là tạo ra một hiệu ứng 3D. |
|---|
Xác định độ biến thiên cho dải màu được thiết lập như thuộc tính dưới đây của đối tượng cần vẽ:
ctx.strokeStyle = grad;
Định nghĩa chiều rộng của đường viền của đối tượng vẽ (kích thước 10% của bán kính):
ctx.lineWidth = radius * 0.1;
Vẽ hình tròn:
ctx.stroke();
Vẽ phần tâm của đồng hồ:
ctx.beginPath();
ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
ctx.fillStyle = '#333';
ctx.fill();
