Nội dung chính
Canvas trong HTML5
Phần tử HTML5
Ở đây là một thẻ
<canvas id="mycanvas" width="100" height="100"></canvas>
Bạn có thể dễ dàng tìm thấy rằng phần tử
var canvas = document.getElementById("mycanvas");
Bây giờ chúng ta cùng xem một ví dụ đơn giản sử dụng phần tử
<!DOCTYPE HTML>
<html>
<head>
<style>
#mycanvas{border:1px solid red;}
</style>
</head>
<body>
<canvas id="mycanvas" width="100" height="100"></canvas>
</body>
</html>
Rendering Context
Phần tử
Phần tử canvas có một phương thức DOM được gọi là getContext, được sử dụng để đạt được Rendering Context và các hàm vẽ của nó. Hàm này nhận một tham số, kiểu của context là 2d.
Sau đây là code để nhận context được yêu cầu cùng với một kiểm tra nếu trình duyệt của bạn hỗ trợ phần tử
var canvas = document.getElementById("mycanvas");
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// drawing code here
} else {
// canvas-unsupported code here
}
Trình duyệt hỗ trợ
Phiên bản mới nhất của Firefox, Safari, Chrome và Opera tất cả hỗ trợ cho HTML5 Canvas nhưng IE8 không hỗ trợ Canvas.
Bạn có thể sử dụng ExplorerCanvas để có sự hỗ trợ Canvas thông qua IE. Bạn chỉ cần bao gồm Javascript sau:
<!--[if IE]><script src="excanvas.js"></script><![endif]-->
