VIỆN CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG ITPLUS
ITPLUS INSTITUTE OF INFORMATION AND COMMUNICATION TECHNOLOGY
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ó cho thấy 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.
Khóa học Lập trình website với Java
Thiết kế và lập trình web PHP chuyên nghiệp
Lập trình ứng dụng di động Android
Khóa học Lập trình Website với ASP.Net
HTML Canvas là gì?
Phần tử <canvas> của HTML được sử dụng để vẽ đồ hoạ, trực tiếp, thông qua scripting (thường là JavaScript).
Phần tử <canvas> chỉ là một vùng chứa đồ hoạ. Bạn phải sử dụng một kịch bản để 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 xác định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử <canvas>.
| Element | Chorme | Internet explorer | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Canvas HTML Có thể Vẽ Text
Canvas có thể vẽ văn bản đầy màu sắc, có hoặc không có hoạt hì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 bằng đồ thị với hình ảnh biểu đồ và biểu đồ.
HTML Canvas có thể hoạt hình
Canvas vật thể có thể di chuyển. Mọi thứ đều có thể: từ quả bóng nảy đơn giản đến hình ảnh động phức tạp
Canvas HTML có thể tương tác
Canvas có thể trả lời các sự kiện JavaScript.
Canvas có thể đáp ứng bất kỳ hành động nào của người dùng (nhấp chuột chính, nhấp chuột, nhấp chuột vào nút, chuyển động ngón tay).
HTML Canvas có thể được sử dụng trong Trò chơi
Canvas 'cho các 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ụ Canvas
Trong HTML, một 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 để nó có thể được JavaScript đề cập đến.
Thuộc tính chiều rộng và chiều cao là cần thiết để xác định kích thước của khung làm việc.
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ó đường viền và không có nội dung.
Để thêm một đường viền, hãy sử dụng thuộc tính kiểu:
Thí dụ
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>
.jpg)
