Hướng dẫn HTML Canvas

Phần tử HTML <canvas> được sử dụng để vẽ đồ họa trên trang web.

Hình trên được tạo bằng <canvas>.

Nó hiển thị bốn yếu tố: một hình chữ nhật màu đỏ, một hình chữ nhật gradient, một hình chữ nhật nhiều màu và một văn bản nhiều màu.

HTML Canvas là gì?

Phần tử HTML <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).

Phần tử <canvas> chỉ là vùng chứa cho đồ họa. Bạn phải sử dụng một tập lệnh để thực sự vẽ đồ họa.

Canvas có một số phương pháp để vẽ đường dẫn, hộp, hình tròn, văn bản và thêm hình ảnh.

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ử <canvas>.

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

Canvas có thể vẽ văn bản đầy màu sắc, có hoặc không có hoạt ảnh.

HTML Canvas có thể vẽ đồ họa

Canvas có các tính năng tuyệt vời để trình bày dữ liệu đồ họa với hình ảnh đồ thị và biểu đồ.

HTML Canvas có thể được tạo hoạt ảnh

Các đối tượng canvas có thể di chuyển. Mọi thứ đều có thể xảy ra: từ những quả bóng nảy đơn giản đến những hình ảnh động phức tạp.

HTML Canvas 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 nào của người dùng (nhấp phím, nhấp chuột, nhấp vào nút, chuyển động ngón tay).

HTML Canvas có thể được sử dụng trong trò chơi

Các phương pháp của Canvas dành cho hình ảnh động, cung cấp rất nhiều khả năng cho các ứng dụng chơi game HTML.

Ví dụ về canvas

Trong HTML, phần tử <canvas> trông giống như sau:

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

Thuộc tính width and height là cần thiết để xác định kích thước của canvas.

Mẹo: Bạn có thể có nhiều phần tử <canvas> trên một trang HTML.

Để thêm đường viền, hãy sử dụng thuộc tính style:

Các chương tiếp theo hướng dẫn cách vẽ trên canvas.