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. 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.07.0 7.0 4.0 14.0 11.1 4.0 11.0 2.18.0 8.0 5.0 15.0 11.5 4.2 - 4.3 11.1 2.3,3.09.0 9.0 5.1 16.0 11.6 5.0 11.5 4.020% 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 

Thể loại:Thẻ HTML
Thể loại:HTML