Canvas HTML5 vs. SVG

Canvas và SVG đều cho phép bạn tạo hình ảnh trong trình duyệt, nhưng chúng khác nhau về bản chất.

SVG

SVG là ngôn ngữ sử dụng XML để mô tả hình ảnh 2D.

SVG dựa trên XML, điều này có nghĩa là mỗi yếu tố trong SVG DOM đều có thể truy cập được. Bạn có thể gán bộ xử lý sự kiện JavaScript cho một yếu tố.

Trong SVG, mỗi hình ảnh được vẽ đều được coi là đối tượng. Nếu thuộc tính của đối tượng SVG thay đổi, trình duyệt có thể tự động重现 hình ảnh.

Canvas

Canvas được vẽ bằng JavaScript.

Canvas được vẽ theo pixel.

Trong canvas, khi hình ảnh được vẽ xong, nó sẽ không tiếp tục nhận sự chú ý của trình duyệt. Nếu vị trí của nó thay đổi, toàn bộ cảnh cũng cần được vẽ lại, bao gồm bất kỳ đối tượng nào có thể đã bị hình ảnh che盖.

So sánh Canvas và SVG

Bảng dưới đây liệt kê một số khác biệt giữa canvas và SVG.

Canvas

  • Phụ thuộc vào độ phân giải
  • Không hỗ trợ bộ xử lý sự kiện
  • Khả năng vẽ văn bản yếu
  • Có thể lưu kết quả hình ảnh dưới định dạng .png hoặc .jpg
  • Phù hợp nhất với các trò chơi đồ họa, trong đó nhiều đối tượng sẽ được vẽ lại thường xuyên

SVG

  • Không phụ thuộc vào độ phân giải
  • Hỗ trợ bộ xử lý sự kiện
  • Phù hợp nhất với các ứng dụng có khu vực vẽ lớn (ví dụ: Google Maps)
  • Độ phức tạp cao sẽ làm chậm tốc độ vẽ (mọi ứng dụng sử dụng DOM quá mức đều không nhanh)
  • Không phù hợp với ứng dụng trò chơi