Đồ họa với HTML5
Trong ứng dụng thiết kế phần mềm trên môi trường web mà nhóm cài đặt, phần lớn các xử lýở phía client là nhóm cài đặt chủ yếu là các xử lýđồ họa. Về mặt cơ bản, các xử lý đồ họa chủ yếu là các hàm vẽ cơ bản bao gồm vẽ đường thằng, hình chữ nhật, hình ellipse, vẽ đường, vẽ chữ. HTML5 cung cấp hai tập hợp các hàm xử lý đồ họa trên trình duyệt là HTML5 Canvas và HTM5 SVG.
Sau khi trải nghiệm, nhóm đã có những tổng kết và so sánh giữa hai loại đồ họa mà HTML5 hỗ trợ
HTML5 Canvas HTML5 SVG
Pixel-based: canvas cơ bản là một bức tranh. Bức tranh này cung cấp các API cho phép chúng ta vẽ các đối tượng lên
đó.
Object Model-based: các đối tượng được
đối xử giống như một phần tử HTML là một phần của Document Object Model (DOM).
Việc tạo và chỉnh sửa đối tượng phải thực hiện quá ngôn ngữ lập trình (JavaScript).
Việc tạo một đối tượng bằng một ngôn ngữ đánh dấu (XML) và định dạng thông
32
qua Cascading Style Sheets (CSS). Rất khó để bắt các sự kiện tương tác giữa
người dùng với các đối tượng. Để thực hiện sự tương tác thì người lập trình phải lưu các số liệu của đối tượng đồng thời phải luôn bắt các sự kiện chuột trên canvas.
Do các đối tượng là một phần tử thuộc DOM. Mà JavaScript có các library hỗ trợ
rất mạnh về xử lý các sự kiện với DOM, ví dụ như JQuery, Dojo. Rất khó giao tiếp với các ứng dụng đồ họa khác. Do các đối tượng để thể hiện bằng XML nên dễ dàng trao đổi với các ứng dụng khác. Xử lý từng pixel dễ dàng Xử lý từng pixel khó khăn Vẽ với Canvas giống như viết code Window GDI Vẽ với SVG giống như viết code HTML. Bảng 2-1 So sánh HTML5 Canvas và HTML5 SVG
Khi nào dùng HTML5 Canvas
• Phát triển game thì cần xử lý chi tiết từng pixel nền đòi hỏi phải sử dụng các Graphics low-level API
• Đòi hỏi hiệu năng đến từng mili giây. Load một tài liệu DOM chắc chắn là sẽ chậm hơn vẽ trực tiếp.
Khi nào dùng HTML5 SVG
• Sử dụng trong một sốứng dụng đồ họa sau: o Bảng vẽ xây dựng.
33 o Biểu đồ số liệu tài chính kế toán. • Khi ứng dụng có các nhu cầu sau:
o Có thể dùng các số liệu có sẵn để tạo nên tài liệu XML rùi chuyển sang SVG.
o Trao đổi dễ dàng với các loại ứng dụng thiết kế khác (inkscape, Adobe Illustrator, Microsoft Visio, and various CAD programs). o Dễ dàng tương tác với người dùng.
Sau những trải ngiệm, phân tích và đánh giá, nhóm đã quyết định sử dụng HTML5 SVG làm thư viện xử lýđồ họa để cài đặt ứng dụng.