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...

Đọ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...

Đọ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...

Đọ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...

Đọ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...

Đọ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...

Đọ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...

Đọ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 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...

Đọc tiếp