Thẻ HTML <canvas>
Ví dụ
Vẽ nhanh một hình chữ nhật màu đỏ và hiển thị nó bên trong phần tử <canvas>:
<canvas id="myCanvas">
Your browser
does not support the canvas tag.
</canvas>
<script>
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>
Hãy tự mình thử »Thêm ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và cách sử dụng
Thẻ <canvas>
được sử dụng để vẽ đồ họa một cách nhanh chóng thông qua tập lệnh (thường là JavaScript).
Thẻ <canvas>
trong suốt và chỉ là nơi chứa đồ họa, bạn phải sử dụng tập lệnh để vẽ đồ họa thực sự.
Mọi văn bản bên trong phần tử <canvas>
sẽ được hiển thị trong các trình duyệt đã tắt JavaScript và trong các trình duyệt không hỗ trợ <canvas>
.
Lời khuyên và ghi chú
Mẹo: Tìm hiểu thêm về phần tử <canvas>
trong Hướng dẫn Canvas HTML của chúng tôi.
Mẹo: Để có tài liệu tham khảo đầy đủ về tất cả các thuộc tính và phương thức, vui lòng truy cập Tài liệu tham khảo Canvas HTML của chúng tôi.
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử.
Element | |||||
---|---|---|---|---|---|
<canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Thuộc tính
Attribute | Value | Description |
---|---|---|
height | pixels | Specifies the height of the canvas. Default value is 150 |
width | pixels | Specifies the width of the canvas Default value is 300 |
Thuộc tính chung
Thẻ <canvas>
cũng hỗ trợ Thuộc tính chung trong HTML .
Thuộc tính sự kiện
Thẻ <canvas>
cũng hỗ trợ Thuộc tính sự kiện trong HTML .
Thêm ví dụ
Ví dụ
Một ví dụ <canvas> khác:
<canvas id="myCanvas">
Your browser does not
support the canvas tag.
</canvas>
<script>
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20,
20, 75, 50);
//Turn transparency on
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle
= "green";
ctx.fillRect(80, 80, 75, 50);
</script>
Hãy tự mình thử »Cài đặt CSS mặc định
Hầu hết các trình duyệt sẽ hiển thị phần tử <canvas>
với các giá trị mặc định sau: