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.