Thẻ canvas trong HTML

Ví dụ

Vẽ một hình vuông màu đỏ và hiển thị nó ra trong phần tử <canvas>:

<canvas id="myCanvas"></canvas>

<script>
 var canvas = document.getElementById("myCanvas");
 var ctx = canvas.getContext("2d");
 ctx.fillStyle = "#FF0000";
 ctx.fillRect(0, 0, 80, 80);
</script>

Kết quả:

Định nghĩa và cách dùng

Thẻ <canvas> được dùng để vẽ đồ hoạ, thông qua các đoạn mã (thường là JavaScript).

Thẻ <canvas> chỉ bao gồm các hình vẽ đồ hoạ, bạn phải sử dụng các đoạn mã để thực sự vẽ được các hình.


Trình duyệt hỗ trợ

Con số trong bảng chỉ phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ tính năng của thẻ.

Thẻ  Chrome  IE  FireFox  Safari  Opera
<canvas> 4.0 9.0 2.0 3.1 9.0

Sự khác nhau giữa HTML 4.01 và HTML5

Thẻ <canvas> là thẻ mới trong HTML5.

Các mẹo và chú ý

Lưu ý: Bất kỳ văn bản nào nằm bên trong phần tử <canvas> sẽ hiển thị ra bên ngoài trình duyệt không hỗ trợ thẻ <canvas>.

Mẹo: Học thêm về phần tử <canvas> ở chuyên mục về HTML Canvas của chúng tôi.

Mẹo: Thư mục tham khảo cho toàn bộ thuộc tính và phương thức bạn có thể sử dụng với đối tượng canvas, người học hãy ghé thăm khu vực Thư mục HTML Canvas.


Các thuộc tính

Thuộc tính Giá trị Mô tả
height pixels Chỉ định chiều cao của canvas
width pixels Chỉ định chiều rộng của canvas

Thiết lập CSS mặc định

Không.