[HTML5 Canvas] Thiết kế, lắp đặt đồng hồ
Sat Aug 05, 2017 7:24 pm
Bài viết hướng dẫn bạn tạo một chiếc đồng hồ trên trang web với HTML canvas. Nội dung của bài được biên soạn từ w3schools.com
Re: [HTML5 Canvas] Thiết kế, lắp đặt đồng hồ
Sat Aug 05, 2017 7:27 pm
Phần I – Tạo Canvas
Đầu tiên chiếc đồng hồ cần có một nơi để “trưng bày” (HTML container). Chúng ta cần tạo một HTML canvas với kích thước là 300 x 300 px:
Code ở trên viết gì?
Thêm phần tử HTML <canvas> vào trang (chỗ để trưng bày đồng hồ):
Tạo một đối tượng canvas (var canvas) trong JavaScript từ phần tử HTML canvas vừa thêm ở trên:
Tạo đối tượng để vẽ 2d (var ctx) từ đối tượng canvas ở trên:
Tính toán bán kính của chiếc đồng hồ (var radius), sử dụng chiều cao của canvas:
Lưu ý: Sử dụng chiều cao của canvas để tính bán kính của đồng hồ sẽ khiến đồng hồ có thể “trưng bày” vừa vặn với bất kỳ kích cỡ nào của canvas.
Đặt lại vị trí (0,0) (của đối tượng vẽ – ctx) vào trung tâm của canvas:
Xây dựng một hàm để trưng bày (vẽ) đồng hồ:
Đầu tiên chiếc đồng hồ cần có một nơi để “trưng bày” (HTML container). Chúng ta cần tạo một HTML canvas với kích thước là 300 x 300 px:
- Code:
<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>
Code ở trên viết gì?
Thêm phần tử HTML <canvas> vào trang (chỗ để trưng bày đồng hồ):
- Code:
<canvas id="canvas" style="background-color: #333;" width="300" height="300"></canvas>
Tạo một đối tượng canvas (var canvas) trong JavaScript từ phần tử HTML canvas vừa thêm ở trên:
- Code:
var canvas = document.getElementById("canvas");
Tạo đối tượng để vẽ 2d (var ctx) từ đối tượng canvas ở trên:
- Code:
var ctx = canvas.getContext("2d");
Tính toán bán kính của chiếc đồng hồ (var radius), sử dụng chiều cao của canvas:
- Code:
var radius = canvas.height / 2;
Lưu ý: Sử dụng chiều cao của canvas để tính bán kính của đồng hồ sẽ khiến đồng hồ có thể “trưng bày” vừa vặn với bất kỳ kích cỡ nào của canvas.
Đặt lại vị trí (0,0) (của đối tượng vẽ – ctx) vào trung tâm của canvas:
- Code:
ctx.translate(radius, radius);
Xây dựng một hàm để trưng bày (vẽ) đồng hồ:
- Code:
function drawClock() {
ctx.arc(0, 0, radius, 0 , 2*Math.PI);
ctx.fillStyle = "white";
ctx.fill();
}
Re: [HTML5 Canvas] Thiết kế, lắp đặt đồng hồ
Sat Aug 05, 2017 8:04 pm
Phần II – Dựng mặt
Đồng hồ cần phải có mặt. Chúng ta sẽ viết một hàm JavaScript để xây dựng mặt cho nó (bổ sung các hàm này vào trong cặp thẻ <script> ở Phần I nhé, và nhớ bỏ hàm drawClock() đang viết dang dở đi :0):
Code ở trên viết gì?
Chúng ta viết hàm drawFace() để vẽ mặt cho chiếc đồng hồ này:
Vẽ một hình trong màu trắng:
Tạo một radial gradient (sử dụng 95% và 105% bán kính của đồng hồ):
Tạo ba mức màu (color stop), tương ứng với ba vùng trong, giữa và ngoài cùng của các vòng tròn tạo ở trên (radial gradient):
Định nghĩa gradient như một kiểu (style) stroke của đối tượng vẽ ctx:
Định nghĩa độ rộng đường thẳng cho đối tượng vẽ ctx (bằng 10% bán kính):
Vẽ đường tròn (hàm stroke thực thi việc vẽ và hiển thị các hình tròn được vẽ với kiểu là grad):
Vẽ tâm của đồng hồ (trục quay của các kim đồng hồ):
Đồng hồ cần phải có mặt. Chúng ta sẽ viết một hàm JavaScript để xây dựng mặt cho nó (bổ sung các hàm này vào trong cặp thẻ <script> ở Phần I nhé, và nhớ bỏ hàm drawClock() đang viết dang dở đi :0):
- Code:
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, '#0f52a0');
grad.addColorStop(0.5, 'white');
grad.addColorStop(1, '#0f52a0');
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 = '#0f52a0';
ctx.fill();
}
Code ở trên viết gì?
Chúng ta viết hàm drawFace() để vẽ mặt cho chiếc đồng hồ này:
- Code:
function drawClock() {
drawFace(ctx, radius);
}
function drawFace(ctx, radius) {
}
Vẽ một hình trong màu trắng:
- Code:
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2*Math.PI);
ctx.fillStyle = 'white';
ctx.fill();
Tạo một radial gradient (sử dụng 95% và 105% bán kính của đồng hồ):
- Code:
grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
Tạo ba mức màu (color stop), tương ứng với ba vùng trong, giữa và ngoài cùng của các vòng tròn tạo ở trên (radial gradient):
- Code:
grad.addColorStop(0, '#0f52a0');
grad.addColorStop(0.5, 'white');
grad.addColorStop(1, '#0f52a0');
Định nghĩa gradient như một kiểu (style) stroke của đối tượng vẽ ctx:
- Code:
ctx.strokeStyle = grad;
Định nghĩa độ rộng đường thẳng cho đối tượng vẽ ctx (bằng 10% bán kính):
- Code:
ctx.lineWidth = radius * 0.1;
Vẽ đường tròn (hàm stroke thực thi việc vẽ và hiển thị các hình tròn được vẽ với kiểu là grad):
- Code:
ctx.stroke();
Vẽ tâm của đồng hồ (trục quay của các kim đồng hồ):
- Code:
ctx.beginPath();
ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
ctx.fillStyle = '#0f52a0';
ctx.fill();
Re: [HTML5 Canvas] Thiết kế, lắp đặt đồng hồ
Sat Aug 05, 2017 9:03 pm
Phần III – Gắn số
Đồng hồ cần các con số chỉ giờ. Chúng ta sẽ viết một hàm JavaScript để gắn các con số cho nó (bổ sung hàm này vào trong cặp thẻ <script> ở Phần I nhé và thêm lời gọi hàm drawNumbers vào trong hàm drawClock ):
Code ở trên viết gì?
Thiết lập kích thước phông chữ (cho đối tượng vẽ) bằng 15% bán kính đồng hồ:
Thiết lập vị trí gắn số (nằm giữa – middle – theo chiều thẳng đứng và nằm ở trung tâm – center – theo chiều ngang đối với vị trí gắn số):
Tính toán vị trí gắn số (cho 12 số) bằng 85% bán kính, quay một góc PI/6 (radian) với mỗi số:
Đồng hồ cần các con số chỉ giờ. Chúng ta sẽ viết một hàm JavaScript để gắn các con số cho nó (bổ sung hàm này vào trong cặp thẻ <script> ở Phần I nhé và thêm lời gọi hàm drawNumbers vào trong hàm drawClock ):
- Code:
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);
}
}
Code ở trên viết gì?
Thiết lập kích thước phông chữ (cho đối tượng vẽ) bằng 15% bán kính đồng hồ:
- Code:
ctx.font = radius*0.15 + "px arial";
Thiết lập vị trí gắn số (nằm giữa – middle – theo chiều thẳng đứng và nằm ở trung tâm – center – theo chiều ngang đối với vị trí gắn số):
- Code:
ctx.textBaseline="middle";
ctx.textAlign="center";
Tính toán vị trí gắn số (cho 12 số) bằng 85% bán kính, quay một góc PI/6 (radian) với mỗi số:
- Code:
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);
}
Re: [HTML5 Canvas] Thiết kế, lắp đặt đồng hồ
Sat Aug 05, 2017 9:07 pm
Phần IV – Lắp đặt kim
Đồng hồ còn cần có các kim (giờ, phút, giây). Chúng ta sẽ viết một hàm JavaScript để lắp đặt kim cho nó (bổ sung hàm này vào trong cặp thẻ <script> ở Phần I và thêm lệnh gọi hàm drawTime vào hàm drawClock nhé):
Code ở trên viết gì?
Sử dụng Date có sẵn trong JavaScript để đặt giờ, phút và giây cho đồng hồ của chúng ta:
Tính toán góc của kim giờ, và vẽ nó với một chiều dài (50% bán kính), và một chiều rộng (7% của bán kính). Nên nhớ kim quay được 1 vòng tương ứng với 360 o (tức 2xPI), như vậy mỗi giờ tương ứng với một góc 360 o /12 = 2xPI/12 = PI/6, để tính góc của kim giờ còn phải căn cứ vào phút và giây tại thời điểm đó:
Sử dụng cùng cách thức trên với kim phút và kim giây.
Hàm drawHand() không cần phải giải thích. Nó chỉ vẽ các kim (đường thẳng) với độ dài, độ rộng đã được tính toán (sẽ quay một góc tương ứng vị trí của kim trước khi vẽ kim – ctx.rotate(pos) ) .
Đồng hồ còn cần có các kim (giờ, phút, giây). Chúng ta sẽ viết một hàm JavaScript để lắp đặt kim cho nó (bổ sung hàm này vào trong cặp thẻ <script> ở Phần I và thêm lệnh gọi hàm drawTime vào hàm drawClock nhé):
- Code:
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();
// Giờ
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);
// Phút
minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
drawHand(ctx, minute, radius*0.8, radius*0.07);
// Giây
second=(second*Math.PI/30);
ctx.strokeStyle = '#f37126';
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);
}
Code ở trên viết gì?
Sử dụng Date có sẵn trong JavaScript để đặt giờ, phút và giây cho đồng hồ của chúng ta:
- Code:
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 một chiều dài (50% bán kính), và một chiều rộng (7% của bán kính). Nên nhớ kim quay được 1 vòng tương ứng với 360 o (tức 2xPI), như vậy mỗi giờ tương ứng với một góc 360 o /12 = 2xPI/12 = PI/6, để tính góc của kim giờ còn phải căn cứ vào phút và giây tại thời điểm đó:
- Code:
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 cách thức trên với kim phút và kim giây.
Hàm drawHand() không cần phải giải thích. Nó chỉ vẽ các kim (đường thẳng) với độ dài, độ rộng đã được tính toán (sẽ quay một góc tương ứng vị trí của kim trước khi vẽ kim – ctx.rotate(pos) ) .
Re: [HTML5 Canvas] Thiết kế, lắp đặt đồng hồ
Sat Aug 05, 2017 9:19 pm
Phần V – Lắp pin và chạy
Để chạy chiếc đồng hồ này chúng ta cần gọi hàm drawClock() sau một khoảng thời gian:
Code ở trên viết gì?
Việc cần làm bây giờ chỉ là bạn phải gọi hàm drawClock() sau một khoảng thời gian.
Để làm việc này chúng ta sẽ thay thế dòng code:
Bằng dòng code:
Khoảng thời gian được tính bằng mili giây. Như vậy hàm drawClock() sẽ được gọi 1000 mili giây (tức 1 giây) một lần.
Tích tắc, tích tắc, … đây là chiếc đồng hồ của bạn:
Để chạy chiếc đồng hồ này chúng ta cần gọi hàm drawClock() sau một khoảng thời gian:
- Code:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
//drawClock();
setInterval(drawClock, 1000);
Code ở trên viết gì?
Việc cần làm bây giờ chỉ là bạn phải gọi hàm drawClock() sau một khoảng thời gian.
Để làm việc này chúng ta sẽ thay thế dòng code:
- Code:
drawClock();
Bằng dòng code:
- Code:
setInterval(drawClock, 1000);
Khoảng thời gian được tính bằng mili giây. Như vậy hàm drawClock() sẽ được gọi 1000 mili giây (tức 1 giây) một lần.
Tích tắc, tích tắc, … đây là chiếc đồng hồ của bạn:
Re: [HTML5 Canvas] Thiết kế, lắp đặt đồng hồ
Sat Aug 05, 2017 9:24 pm
Phần VI – Thử thách thợ đồng hồ
1, Lắp đặt số La Mã thay cho số Thập phân
2, Tháo bớt số chỉ để lại 4 số: 3, 6, 9, 12
3, Sơn lại đồng hồ
4, Sơn thêm vạch chỉ giờ
5, Thay kim giây có phần đuôi dài hơn
6, Thợ sáng tạo thêm nhé…
1, Lắp đặt số La Mã thay cho số Thập phân
2, Tháo bớt số chỉ để lại 4 số: 3, 6, 9, 12
3, Sơn lại đồng hồ
4, Sơn thêm vạch chỉ giờ
5, Thay kim giây có phần đuôi dài hơn
6, Thợ sáng tạo thêm nhé…
Techtalk Via tapchilaptrinh
Permissions in this forum:
You cannot reply to topics in this forum