Tìm hiểu đồ hoạ Website

Trần Đức Lĩnh

HTML5 hỗ trợ 2 dạng đồ hoạ gồm CanvasSVG, những công nghệ này giải quyết các kịch bản đồ hoạ phức tạp, đưới đây là những đặc điểm khác biệt của chúng.

image-title-here


Canvas

Element Canvas được xác định trong HTML bởi thuộc tính width & height, cần JavaScript để có thể thông qua Canvas API truy cập đến canvas đã được tạo trước đó.

Lý do tiếp xúc

  • -Tính tương tác- bao gồm phản hồi các hành vi người dùng qua việc lắng nghe các sự kiện bàn phím, chuột, và chạm. Nhà phát triển sẽ thoải mái hơn.
  • -Hiệu ứng- của đối tượng được vẽ bằng canvas đều có thể được chuyển động thông qua JavaScript.
  • -Tính linh hoạt- bao gồm thể hiện các đường thằng, chữ cái, hoặc ảnh,... kèo theo các hiệu ứng bắt mắt. Có thể chèn thêm video, audio vào bên trong canvas.
  • -Mức độ phổ biến- được thể hiện qua việc hỗ trợ các trình duyệt có nhiều người dùng nhất...
  • -Chuẩn web- bởi vì canvas là 1 công nghệ mở và là 1 phần của HTML.

Mục đích sử dụng

  • -Gaming- được hướng tới khi sử dụng canvas, từ game 2D-3D.
  • -Quảng cáo- là sự thay thế tuyệt vời cho Banner hoặc Quảng cáo dựa vào flash để thu hút người mua.
  • -Biểu diễn dữ liệu- khách quan hơn khi sử dụng canvas
  • -Hỗ trợ giáo dục & giải trí- bao gồm game và tạo web học tập.

SVG

Scalable Vector Graphic -Ra mắt ngày 14-1-2003

Có thể nói nó là một ngôn ngữ mô phỏng đồ hoạ 2D và các ứng dụng đồ hoạ trong XML, sau đó xml được trả lại bởi SVG Viewer.

Ưu điểm của SVG

  • Phóng to nhưng không vỡ ảnh
  • Có thể in ấn với chất lượng cao nhất
  • Tìm kiếm, đánh dấu, nén từ SVG...
  • Chuyển động được khi sử dụng animation đã dựng trước đó
  • Có thể được chỉnh sửa bằng JavaScrpit như Canvas
  • Chứa các liên kết đến bất kỳ tài liệu nào
  • Hầu như được hỗ trợ trên tất cả các trình duyệt

So sách tổng quan giữa Canvas và SVG
Canvas SVG
- Phụ thuộc vào độ phân giải
- Không hỗ trợ xử lý sự kiện
- Thành phần đơn, tương tự thẻ HTML
- Chỉ chỉnh sửa qua JavaScipt
- Kéo giãn vỡ nét, mất chất lượng
- Dựa hoàn toàn vào `pixel`
- Không phụ thuộc vào độ phân giải
- Hỗ trợ xử lý sự kiện
- Có nhiều thành phần đồ học, trở thành 1 phần trong DOM
- Chỉnh sửa qua `CSS` và `JavaScript`
- Sự kéo giãn không ảnh hưởng đến chất lượng
- Dựa hoàn toàn vào `vector`