1. Web
  2. HTML
  3. Reference
  4. Elements
  5. <canvas>

<canvas>: The Graphics Canvas element

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Sử dụng phần tử HTML <canvas> với canvas scripting API hoặc WebGL API để vẽ đồ họa và hoạt ảnh.

Thuộc tính

Các thuộc tính của phần tử này bao gồm thuộc tính toàn cục.

height

Chiều cao của không gian tọa độ tính bằng CSS pixels. Mặc định là 150.

moz-opaque

Cho phép canvas biết liệu độ trong suốt có phải là một yếu tố hay không. Nếu canvas biết không có độ trong suốt, hiệu suất vẽ có thể được tối ưu hóa. Thuộc tính này chỉ được hỗ trợ bởi các trình duyệt dựa trên Mozilla; thay vào đó hãy sử dụng canvas.getContext('2d', { alpha: false }) đã được chuẩn hóa.

width

Chiều rộng của không gian tọa độ tính bằng CSS pixels. Mặc định là 300.

Ghi chú sử dụng

Nội dung thay thế

Bạn nên cung cấp nội dung thay thế bên trong khối <canvas>. Nội dung đó sẽ được hiển thị trên các trình duyệt cũ không hỗ trợ canvas và trên các trình duyệt có JavaScript bị tắt.

Thẻ đóng </canvas>

Khác với phần tử <img>, phần tử <canvas> yêu cầu thẻ đóng (</canvas>).

Đặt kích thước canvas bằng CSS so với HTML

Kích thước hiển thị của canvas có thể được thay đổi bằng CSS, nhưng nếu làm vậy, hình ảnh sẽ được thu phóng trong quá trình kết xuất để vừa với kích thước được tạo kiểu, điều này có thể khiến kết xuất đồ họa cuối cùng bị méo.

Tốt hơn là chỉ định kích thước canvas của bạn bằng cách đặt trực tiếp các thuộc tính width và height trên các phần tử <canvas>, trực tiếp trong HTML hoặc bằng cách dùng JavaScript.

Kích thước canvas tối đa

Kích thước tối đa chính xác của phần tử <canvas> phụ thuộc vào trình duyệt và môi trường. Trong hầu hết các trường hợp, kích thước tối đa vượt quá 10.000 x 10.000 pixel, nhưng đáng chú ý là các thiết bị iOS giới hạn kích thước canvas chỉ còn 4.096 x 4.096 pixel. Xem giới hạn kích thước canvas trong các trình duyệt và thiết bị khác nhau.

Note: Vượt quá kích thước hoặc diện tích tối đa sẽ khiến canvas không thể sử dụng được — các lệnh vẽ sẽ không hoạt động.

Sử dụng canvas ngoài màn hình

Canvas có thể được kết xuất bằng API OffscreenCanvas nơi tài liệu và canvas được tách rời nhau. Lợi ích là luồng worker có thể xử lý việc kết xuất canvas và luồng chính của ứng dụng web của bạn không bị chặn bởi các thao tác canvas. Bằng cách song song hóa công việc, các phần tử UI khác của ứng dụng web của bạn sẽ vẫn phản hồi ngay cả khi bạn đang chạy đồ họa phức tạp trên canvas ngoài màn hình. Để biết thêm thông tin, xem tài liệu API OffscreenCanvas.

Khả năng tiếp cận

Nội dung thay thế

Phần tử <canvas> tự nó chỉ là một bitmap và không cung cấp thông tin về bất kỳ đối tượng được vẽ nào. Nội dung canvas không được hiển thị với các công cụ hỗ trợ tiếp cận như HTML ngữ nghĩa. Nhìn chung, bạn nên tránh sử dụng canvas trong trang web hoặc ứng dụng có thể tiếp cận. Các hướng dẫn sau có thể giúp làm cho nó dễ tiếp cận hơn.

Ví dụ

HTML

Đoạn code này thêm phần tử canvas vào tài liệu HTML của bạn. Văn bản dự phòng được cung cấp nếu trình duyệt không thể đọc hoặc kết xuất canvas.

html
<canvas width="120" height="120">
  An alternative text describing what your canvas displays.
</canvas>

JavaScript

Sau đó, trong code JavaScript, hãy gọi HTMLCanvasElement.getContext() để lấy ngữ cảnh vẽ và bắt đầu vẽ lên canvas:

js
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
// Add a rectangle at (10, 10) with size 100x100 pixels
ctx.fillRect(10, 10, 100, 100);

Kết quả

Tóm tắt kỹ thuật

Danh mục nội dung Nội dung luồng, nội dung cụm từ, nội dung nhúng, nội dung hữu hình.
Nội dung được phép Trong suốt nhưng không có phần tử con nội dung tương tác ngoại trừ phần tử <a>, phần tử <button>, phần tử <input> có thuộc tính type là checkbox, radio hoặc button.
Bỏ qua thẻ Không được phép, cả thẻ mở và thẻ đóng đều bắt buộc.
Phần tử cha được phép Bất kỳ phần tử nào chấp nhận nội dung cụm từ.
Vai trò ARIA ngầm định Không có vai trò tương ứng
Vai trò ARIA được phép Bất kỳ
Giao diện DOM HTMLCanvasElement

Đặc tả

Specification
HTML
# the-canvas-element

Tương thích trình duyệt

Xem thêm

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content