Canvas (phần tử HTML5)

HTML
HTML động HTML5 HTML5 audio Canvas HTML5 video XHTML XHTML Basic XHTML Mobile Profile I-mode Phần tử HTML Span and div HTML attribute Frame (World Wide Web) Trình biên tập HTML Character encodings in HTML Unicode and HTML Mã ngôn ngữ DOM Browser Object Model Style sheet (web development)s CSS Font family (HTML) Web colors HTML scripting JavaScript WebGL WebCL W3C W3C Markup Validation Service WHATWG Quirks mode Web storage Browser engine
Comparisons
Comparison of document-markup languages Comparison of browser engines (HTML support) Comparison of layout engines (XHTML) Comparison of layout engines (XHTML 1.1)

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

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%

Liên kết ngoài

• Giới thiệu phần tử canvas trên w3c
• Giới thiệu canvas của WHATWG
• Trang tham khảo canvas của Apple
• Hướng dẫn sử dụng canvas cơ bản của opera
• Hướng dẫn canvas của Mozilla Lưu trữ 2012-08-03 tại Wayback Machine