Thẻ <canvas> HTML

Định nghĩa và cách sử dụng

<canvas> Thẻ thường được vẽ bằng script (thường là JavaScript) trong thời gian thực.

<canvas> Thẻ là trong suốt, nó chỉ là hộp chứa hình ảnh, bạn phải sử dụng script để vẽ hình ảnh thực tế.

trong trình duyệt không cho phép JavaScript và không hỗ trợ <canvas> trong trình duyệt của bạn sẽ hiển thị <canvas> mọi văn bản bên trong phần tử.

Lưu ý

Học về HTML Canvas của chúng tôi trong <canvas> thông tin chi tiết về phần tử.

Để xem tài liệu tham khảo đầy đủ về tất cả các thuộc tính và phương thức, hãy truy cập Sách tham khảo Canvas HTML.

Mô hình

Ví dụ 1

Vẽ một矩形的 màu đỏ theo thời gian thực và hiển thị nó trong phần tử <canvas>:

<canvas id="myCanvas">
Trình duyệt của bạn không hỗ trợ thẻ canvas.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>

Thử ngay

Ví dụ 2

Ví dụ <canvas> khác:

<canvas id="myCanvas">
Trình duyệt của bạn không hỗ trợ thẻ canvas.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
// Mở độ trong suốt
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "green";
ctx.fillRect(80, 80, 75, 50);
</script>

Thử ngay

Thuộc tính

Thuộc tính Giá trị Mô tả
height Giá trị pixel Định nghĩa chiều cao của khung vẽ. Giá trị mặc định là 150.
width Giá trị pixel Định nghĩa chiều rộng của khung vẽ. Giá trị mặc định là 300.

Thuộc tính toàn cục

<canvas> Thẻ hỗ trợ Thuộc tính toàn cục trong HTML.

Thuộc tính sự kiện

<canvas> Thẻ hỗ trợ Thuộc tính sự kiện trong HTML.

Cài đặt CSS mặc định

Hầu hết các trình duyệt sẽ hiển thị các giá trị mặc định sau: <canvas> Thành phần:

canvas {
  height: 150px;
  width: 300px;
}

Thử ngay

Lịch sử của <canvas>

Đây là phần tử HTML được thiết kế cho đồ họa vector trên client. Nó không có hành vi riêng nhưng hiển thị một API vẽ cho JavaScript của client để các script có thể vẽ mọi thứ muốn vẽ lên một khung vẽ.

Thẻ <canvas> được Apple giới thiệu trong trình duyệt web Safari 1.3. Lý do của việc mở rộng cơ bản này của HTML là khả năng vẽ của HTML trong Safari cũng được sử dụng bởi thành phần Dashboard của Mac OS X, và Apple hy vọng có một cách để hỗ trợ đồ họa script hóa trong Dashboard.

Firefox 1.5 và Opera 9 đều theo sau sự dẫn đầu của Safari. Cả hai trình duyệt này đều hỗ trợ thẻ <canvas>.

Chúng ta thậm chí có thể sử dụng thẻ <canvas> trong IE, và xây dựng các canvas tương thích dựa trên hỗ trợ VML của IE bằng mã JavaScript mở nguồn (do Google khởi xướng). Xem thêm:http://excanvas.sourceforge.net/.

Nỗ lực tiêu chuẩn hóa của <canvas> được thúc đẩy bởi một hiệp hội không chính thức của các nhà sản xuất trình duyệt web, hiện tại <canvas> đã trở thành một thẻ chính thức trong dự thảo HTML 5. Xem thêm:http://www.whatwg.org/specs/web-apps/current-work/

Các sự khác biệt giữa thẻ <canvas> và SVG và VML

Một sự khác biệt quan trọng giữa thẻ <canvas> và SVG và VML là, <canvas> có một API vẽ dựa trên JavaScript, trong khi SVG và VML sử dụng một tài liệu XML để mô tả vẽ.

Cả hai cách này về chức năng là tương đương, bất kỳ cách nào cũng có thể được mô phỏng bằng cách khác. Trên bề mặt, chúng rất khác nhau, nhưng mỗi cách đều có ưu điểm và nhược điểm. Ví dụ, việc vẽ SVG rất dễ dàng chỉnh sửa, chỉ cần loại bỏ yếu tố từ mô tả của nó.

Để loại bỏ các yếu tố từ một thẻ <canvas> cùng một hình ảnh, thường cần xóa vẽ lại và vẽ lại nó.

cách sử dụng thẻ <canvas> để vẽ

hầu hết các API vẽ Canvas không được định nghĩa trên phần tử <canvas>本身, mà được định nghĩa thông qua. phương thức getContext()được lấy từ một đối tượng "môi trường vẽ".

API Canvas cũng sử dụng biểu diễn phương thức đường dẫn. Nhưng, đường dẫn được định nghĩa bởi một loạt các phương thức gọi,而不是 được mô tả bởi chuỗi ký tự bao gồm cả chữ cái và số, chẳng hạn như gọi phương thức beginPath() và arc().

Một khi đã định nghĩa đường dẫn, các phương thức khác như fill() đều thực hiện các thao tác trên đường dẫn này. Các thuộc tính của môi trường vẽ, chẳng hạn như fillStyle, giải thích cách các thao tác này được sử dụng.

Ghi chú:Một trong những lý do Canvas API rất gọn gàng là nó không cung cấp bất kỳ hỗ trợ nào cho việc vẽ văn bản. Để thêm văn bản vào một hình ảnh <canvas>, bạn phải hoặc vẽ nó và sau đó hợp nhất nó với hình ảnh bitmap, hoặc sử dụng CSS positioning ở trên <canvas> để che盖 văn bản HTML.

Hỗ trợ trình duyệt

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ phần tử này hoàn toàn.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 2.0 3.1 9.0