Canvas (phần tử HTML5)

Canvas là một phần tử của HTML5, cho phép thực hiện lập trình kết xuất đồ họa các đối tượng hai chiều trên trang web.

Phần tử này được Apple giới thiệu lần đầu năm 2004 trong Mac OS X Webkit, dùng xây dựng các ứng dụng tiện ích trên Dashboard và trình duyệt safari. Năm 2005, nó được sử dụng trong phiên bản 1.8 của trình duyệt Gecko, năm 2006 là Opera, và được WHATWG chuẩn hóa và đề xuất trở thành một thông số kỹ thuật cho thế hệ kỹ thuật web mới.

Sử dụng

Canvas chiếm một khu vực trong trang web với chiều cao và chiều rộng định trước. Sau đó mã Javascript có thể truy cập vào khu vực này để vẽ thông qua một tập các hàm đồ họa tương tự như các API 2D khác, từ đó cho phép đồ họa động. Canvas có thể dùng để để vẽ các đồ thị, hoạt họa, làm trò chơi, sáng tác hình ảnh...

Ví dụ

Đoạn mã sau tạo ra một phần tử canvas trong trang HTML:

<canvas id="example" width="200" height="200">
Đoạn văn bản này hiển thị vì trình duyệt của bạn không hỗ trợ HTML5 Canvas.
</canvas>

dùng javascript, bạn có thể vẽ lên canvas:

var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = 'red';
context.fillRect(30, 30, 50, 50);

(đoạn mã trên vẽ một hình chữ nhật màu đỏ)

Các trình duyệt hỗ trợ canvas

Phần tử canvas được hỗ trợ trên phiên bản mới nhất của Mozilla Firefox, Google Chrome, Internet Explorer, Safari, Konqueror và Opera.^[1] Các bản cũ của Internet Explorer từ version 8 trở lại không hỗ trợ canvas, Google và Mozilla thì có các plugins hỗ trợ.^[2]

Internet Explorer	Firefox	Safari (Desktop)	Chrome	Opera (Desktop)	Safari (Mobile)	Opera (Mobile)	Android Browser
6.0	2.0 - 6.0	3.1 - 3.2	4.0 - 13.0	9.0 - 11.0	3.2	10.0	2.0
7.0	7.0	4.0	14.0	11.1	4.0	11.0	2.1
8.0	8.0	5.0	15.0	11.5	4.2 - 4.3	11.1	2.3,3.0
9.0	9.0	5.1	16.0	11.6	5.0	11.5	4.0
20%	17%	7%	36%	1%	4%	3%	5%

^ Sucan, Mihai (4 tháng 2 năm 2024). “SVG or Canvas? Сhoosing between the two”. Opera Software. Truy cập ngày 3 tháng 5 năm 2010.
^ “Mozilla drags IE into the future with Canvas element plugin”. Ars Technica. 19 tháng 8 năm 2024. Truy cập ngày 12 tháng 5 năm 2010.

Liên kết ngoài

[1] Sucan, Mihai (4 tháng 2 năm 2024). “SVG or Canvas? Сhoosing between the two”. Opera Software. Truy cập ngày 3 tháng 5 năm 2010.

[2] “Mozilla drags IE into the future with Canvas element plugin”. Ars Technica. 19 tháng 8 năm 2024. Truy cập ngày 12 tháng 5 năm 2010.

[1]

[2]