Bài 11 - Khởi chạy cho đồng hồ bằng HTML Canvas (Canvas Clock - Phần 5 cuối)

Phần 5 - Khởi chạy đồng hồ

Để khởi chạy cho đồng hồ, gọi hàm drawClock trong các khoảng thời gian:

JavaScript:

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);

Xem demo »

---

Giải thích code trên:

Điều mà bạn phải làm bây giờ là start đồng hồ để cho nó chạy, gọi hàm drawClock ở các khoảng thời gian.

Thay thế:

drawClock();

Với:

setInterval(drawClock, 1000);

	Khoảng thời gian đơn vị là milliseconds. hàm drawClock sẽ được gọi cho mỗi giây, tức 1000 milliseconds.

Trương Đức Tài.

Đọc tiếp

Bài 10 - Vẽ kim trên mặt đồng hồ bằng HTML Canvas (Canvas Clock - Phần 4)

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:

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);
}

Xem demo »

---

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.

Trương Đức Tài.

Đọc tiếp

Bài 9 - Tạo số trên mặt đồng hồ bằng HTML Canvas (Canvas Clock - Phần 3)

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:

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);
    }
}

Xem demo »

---

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); 
}

Trương Đức Tài.

Đọc tiếp

Bài 8 - Tạo mặt đồng hồ bằng HTML Canvas (Canvas Clock - Phần 2)

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();
}

Xem demo »

---

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();

Trương Đức Tài.

Đọc tiếp

Bài 7 - Hướng dẫn tạo đồng hồ bằng HTML Canvas (Canvas Clock - Phần 1)

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>

Xem demo »

---

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.

Đọc tiếp

Bài 6 - Vẽ ảnh trên HTML Canvas

Canvas - Images

Ở bài này mình sẽ hướng dẫn cách làm thế nào để vẽ một ảnh lên trên một canvas. Để làm được điều này chúng ta sẽ sử dụng phương thức dưới đây:

drawImage(image,x,y)

Ví dụ

JavaScript:

window.onload = function() {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var img = document.getElementById("scream");
    ctx.drawImage(img, 10, 10);
};

Xem demo »

Lưu ý rằng bạn không thể vẽ được ảnh trước khi ảnh đã được tải. Gọi hàm từ window.onload().

Ở những bài tiếp theo mình sẽ hướng dẫn các bạn chi tiết từng bước để tạo ra một chiếc đồng hồ treo tường bằng Canvas. Các bạn chờ nhé!

Trương Đức Tài.

Đọc tiếp

Bài 5 - Vẽ văn bản trên Canvas

Hi các bạn, hôm nay mình sẽ tiếp tục đi tới bài số 5.
Trong bài này chúng ta sẽ học cách làm thế nào để vẽ được văn bản trên một canvas, những phương thức và thuộc tính quan trọng nhất là:

• font ✓ định nghĩa những thuộc tính phông cho văn bản
• fillText(text,x,y) ✓ vẽ văn bản (có tô màu) trên canvas
• strokeText(text,x,y) ✓ vẽ văn bản trên canvas  (không tô màu)

---

Sử dụng fillText()

Ví dụ

Thiết lập font là 30px "Arial" và viết một text tô màu trên canvas:



JavaScript:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);

Xem demo »

---

Sử dụng strokeText()

Ví dụ

Thiết lập font là 30px "Arial" và viết một text, không tô màu, trên canvas:



JavaScript:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50);

Xem demo »

---

Thêm màu và căn giữa cho văn bản

Ví dụ

Thiết lập font 30px "Comic Sans MS" và viết một text được tô màu đỏ nằm giữa canvas:



JavaScript:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("Hello World", canvas.width/2, canvas.height/2); 

Xem demo »

Trương Đức Tài.

Đọc tiếp

Bài 4 - Tạo dải màu biến thiên với HTML Canvas Gradients

Canvas - Gradients

Gradients có thể được sử dụng để vẽ trong hình nhữ nhật, hình tròn, đường thẳng, văn bản, vv... Hình dáng trên Canvas không bị giới hạn bởi màu sắc cứng nhắc.

Có 2 loại khác nhau của Gradients:

• createLinearGradient(x,y,x1,y1) ✓ tạo một dải màu tuyến tính
• createRadialGradient(x,y,r,x1,y1,r1) ✓ tạo một tâm tròn màu biến thiên

Một khi chúng ta có một đối tượng gradient, chúng ta phải thêm hai hoặc nhiều điểm dừng màu.

Phương thức addColorStop() xác định những điểm dừng màu, và nó là vị trí dọc theo gradient. Những vị trí gradient có thể ở bất cứ nơi nào giữa 0 và 1.

Để sử dụng gradient, thiết lập thuộc tính fillStype hoặc strokeStyle tới gradient, rồi vẽ ra hình dạng (hình chữ nhật, văn bản, hoặc một đường).

---

Sử dụng createLinearGradient()

Ví dụ

Tạo một dải màu tuyến tính. Hình chữ nhật với biến thiên gradient:

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

Xem demo »

---

Sử dụng createRadialGradient():

Ví dụ

Tạo một tâm tròn màu biến thiên trong một hình chữ nhật:


JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);

Xem demo »

⚽ Giải thích ví dụ trên:

var grd=ctx.createRadialGradient(75,50,5,90,60,100);
✓ Vòng tròn thứ nhất có tâm ở vị trí x,y là 75,50 và có bán kính là 5 ✓ Vòng tròn thứ hai có tâm ở vị trí x,y là 90,60 và có bán kính là 100

grd.addColorStop(0,"red"); ✓ Biến thiên màu từ đỏ
grd.addColorStop(1,"white"); ✓ Tới trắng
ctx.fillStyle = grd; ctx.fillRect(10,10,150,80); ✓ Đưa vòng tròn màu biến thiên vào trong hình chữ nhật, Hình chữ nhật được vẽ bắt đầu ở tọa độ x,y là 10,10 và chiều rộng/cao hình nhữ nhật lần lượt là 150,80

Trương Đức Tài.

Đọc tiếp

Bài 3 - Tọa độ trong HTML Canvas

Tọa độ Canvas

HTML canvas là một không gian hai chiều.

Phía trên góc trái của Canvas có tọa là (0,0)

Trong bài trước, bạn đã thấy phương thức này được sử dụng: fillRect(0,0,150,75).

Nó có nghĩa là: Bắt đầu ở góc trên bên trái với tọa độ (0,0) và vẽ một hình chữ nhật với kích thước dài x rộng là 150x75 pixels.

---

Ví dụ
(42,48) là tọa độ điểm màu đỏ như hình bên dưới.

Vẽ một đường thẳng

Để vẽ một đường thẳng trên một Canvas, sử dụng những phương thức sau đây:

• moveTo(x,y) - định nghĩa điểm bắt đầu của đường thẳng
• lineTo(x,y) - định nghĩa điểm kết thúc của đường thẳng

Để thực sự vẽ được một đường thẳng, bạn phải sử dụng một trong những phương thức như stroke().

Ví dụ

Định nghĩa một điểm bắt đầu ở vị trí (0,0), và một điểm kết thúc ở vị trí (200,100).
Sau đó sử dụng phương thức stroke() để vẽ ra một đường thẳng:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

Xem Demo »

---

Vẽ một vòng tròn

Để vẽ một vòng trong trên một Canvas, sử dụng những phương thức sau đây:

• beginPath() - bắt đầu một đường/vòng tròn
• arc(x,y,r,startangle,endangle) - tạo một cung/đường cong. Để tạo một vòng tròn với phương thức arc(): Thiết lập góc ban đầu là 0 và góc kết thúc là 2*Math.PI. Những tham số x, y định nghĩa tọa độ x và y của tâm vòng tròn. Tham số r định nghĩa bán kính của vòng tròn.

Ví dụ

Định nghĩa một vòng tròn với phương thức arc(). Sau đó sử dụng phương thức stroke() để thực hiện vẽ vòng tròn:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

Xem Demo »

Trương Đức Tài.

Đọc tiếp