Hướng dẫn HTML Canvas

元素 <canvas> HTML được sử dụng để vẽ hình ảnh trên trang web.

Hình ảnh trên được tạo bởi <canvas>.

Nó hiển thị bốn phần tử: hình vuông đỏ, hình vuông chuyển dần, hình vuông nhiều màu và văn bản nhiều màu.

HTML Canvas là gì?

Element <canvas> HTML được sử dụng để vẽ đồ họa động bằng script (thường là JavaScript).

Phần tử <canvas> chỉ là bộ chứa đồ họa. Bạn phải sử dụng script để vẽ đồ họa thực tế.

Canvas có nhiều phương pháp để vẽ đường dẫn, khung, hình tròn, văn bản và thêm hình ảnh.

Canvas HTML có thể vẽ văn bản

Canvas có thể vẽ văn bản màu, còn có thể thêm hiệu ứng animation.

Canvas HTML có thể vẽ hình ảnh

Canvas có khả năng mạnh mẽ để biểu diễn dữ liệu đồ họa bằng hình ảnh và biểu đồ.

Canvas HTML có thể tạo animation

Object Canvas có thể di chuyển. Tất cả đều có thể xảy ra: từ simple trứng rơi đến animation phức tạp.

Canvas HTML có thể tương tác

Canvas có thể phản hồi các sự kiện JavaScript.

Canvas có thể phản hồi bất kỳ hành động người dùng nào (bấm phím, bấm chuột, bấm nút, di chuyển ngón tay).

Canvas HTML có thể được sử dụng cho game

Cách xử lý animation của Canvas cung cấp nhiều khả năng cho ứng dụng game HTML.

Ví dụ Canvas

Trong HTML, phần tử <canvas> trông như thế này:

<canvas id="myCanvas" width="200" height="100"></canvas>

Phần tử <canvas> phải có thuộc tính id để JavaScript có thể tham chiếu đến nó.

Thuộc tính width và height là bắt buộc để xác định kích thước của canvas.

Lưu ý: Một trang HTML có thể có nhiều phần tử <canvas>.

Mặc định, phần tử <canvas> không có viền và không có nội dung.

Nếu muốn thêm viền, hãy sử dụng thuộc tính style:

Ví dụ

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

Thử nghiệm ngay

Chương tiếp theo sẽ giới thiệu cách vẽ trên canvas。

Xin xem thêm：

Hướng dẫn tham khảo đầy đủ Canvas của CodeW3C.com

Hỗ trợ trình duyệt

<canvas> là phần tử của tiêu chuẩn HTML5 (2014)。

Tất cả các trình duyệt hiện đại đều hỗ trợ <canvas>：