Hướng dẫn về Canvas HTML

Ví dụ về Canvas HTML

Đồ họa ở trên được tạo bằng <canvas> . Nó chứa bốn đối tượng: hình chữ nhật màu đỏ, hình chữ nhật chuyển màu, hình chữ nhật nhiều màu và văn bản nhiều màu.

Những gì bạn nên biết

Trước khi tiếp tục, bạn cần có hiểu biết cơ bản về những điều sau:

• HTML
• JavaScript cơ bản

Nếu bạn muốn nghiên cứu những chủ đề này trước, hãy tìm các hướng dẫn trên Trang chủ của chúng tôi.

Canvas HTML 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à nơi chứa đồ họa. Bạn phải sử dụng 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.

Canvas HTML 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ó hình động.

Canvas HTML 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 đồ.

Canvas HTML có thể hoạt hình

Các đối tượng canvas có thể di chuyển. Mọi thứ đều có thể thực hiện được: từ những quả bóng nảy đơn giản đến những hình ảnh động 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 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 dành cho hoạt ảnh của Canvas cung cấp nhiều khả năng cho các ứng dụng trò chơi HTML.

Ví dụ về canvas

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

Thuộc tính id là bắt buộc (vì vậy nó có thể được tham chiếu bằng JavaScript).

Thuộc tính width và height xác định kích thước của khung vẽ.

Mẹo: Kích thước mặc định của canvas là 300px (chiều rộng) x 150px (chiều cao).

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

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

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

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