Home » HTML » Đồ họa HTML » Canvas trong HTML5
Thông qua bài, bạn sẽ biết định nghĩa canvas là gì? Các phương thức để vẽ hình lên canvas và ví dụ minh họa.

Canvas trong HTML5


Trình duyệt của bạn không hỗ trợ thẻ <canvas>

Thẻ <canvas> được sử dụng để vẽ đồ họa trong HTML5.

Ảnh ở bên được tạo ra bởi thẻ <canvas>. Trong đó có 4 thành phần: hình chữ nhật đỏ, dải màu, hình chữ nhật nhiều màu và chữ nhiều màu.

Canvas là gì?

Thẻ <canvas> trong HTML5 được sử dụng để vẻ đồ họa một cách nhanh gọn thông qua một ngôn ngữ nào đó (thông thường là JavaScript).

Tuy nhiên, thẻ <canvas> bản thân nó không có khả năng tự vẽ mà nó chỉ là phần bao ngoài cho đồ họa – bạn cần phải sử dụng một ngôn ngữ để vẽ đồ họa bên trong.

Canvas sử dụng một số phương thức để vẽ: đường kẻ, hình hộp, hình tròn, chữ và chèn ảnh.

Trình duyệt hỗ trợ

Số trong bảng dưới đây thể hiện phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ cho thẻ <canvas>:

Thuộc tính Icon Chrome Icon FireFox Icon IE Icon Safari Icon Opera
Canvas 4.0 2.0 9.0 3.1 9.0

Ví dụ về canvas

Canvas là một khu vực hình chữ nhật trong trang. Mặc định, canvas không có đường viền và không có nội dung.

Khởi tạo canvas:

Lưu ý: Luôn sử dụng thuộc tính id (để sử dụng trong JavaScript) và quy định kích thước cho canvas.

Để thêm đường viền, bạn sử dụng thuộc tính style:

Demo

Vẽ hình chữ nhật

Demo

Vẽ đường thẳng

Demo

Vẽ hình tròn

Demo

Viết chữ

Demo

Viết chữ có viền

Demo

Tạo dải màu thẳng với 2 màu đỏ trắng

Demo

Tạo dải màu tròn với 2 màu đỏ trắng

Demo

Chèn ảnh vào canvas

Demo

Leave a Reply

Your email address will not be published. Required fields are marked *

*