HTML 5 Canvas vs. SVG

Canvas และ SVG ทั้งสองอนุญาตให้คุณทำการวาดกราฟิกในเบราซเรอร์ แต่มีความแตกต่างกันอย่างมาก

SVG

SVG คือภาษาที่ใช้ XML อธิบายกราฟิก 2D

SVG มีฐานที่เป็น XML ซึ่งหมายความว่าทุกองค์ประกอบของ SVG DOM ต่างก็สามารถใช้ได้ คุณสามารถเพิ่ม处理器เหตุการณ์ JavaScript ให้กับองค์ประกอบเจาะนั้น

ใน SVG ทุกกราฟิกที่ถูกวาดจะถือเป็นวัตถุ ถ้าคุณสมบัติของวัตถุ SVG มีการเปลี่ยนแปลง แล้วเบราซเรอร์จะสามารถวาดกราฟิกอัตโนมัติ

Canvas

Canvas วาดกราฟิก 2D ผ่าน JavaScript

Canvas วาดกราฟิกด้วยพิกเซล

ใน canvas หลังจากที่กราฟิกถูกวาดเสร็จ มันจะไม่ได้รับความสนใจจากเบราซเรอร์อีกต่อไป ถ้าตำแหน่งของมันเปลี่ยนแปลง แล้วทั้งหมดที่มีอยู่ในภาพทั้งหมดก็ต้องวาดเสร็จใหม่ รวมทั้งที่อาจถูกกราฟิกทับ

การเปรียบเทียบ Canvas และ SVG

ตารางด้านล่างนี้ระบุบางความแตกต่างระหว่าง canvas และ SVG

Canvas

  • ขึ้นกับการแบ่งตัว
  • ไม่สนับสนุน处理器เหตุการณ์
  • มีความสามารถในการวาดข้อความที่น้อย
  • สามารถบันทึกภาพที่วาดเป็น .png หรือ .jpg
  • เหมาะสมที่สุดสำหรับเกมที่มีรูปภาพมากและมีการวาดรูปภาพเหล่านั้นบ่อยครั้ง

SVG

  • ไม่ขึ้นกับการแบ่งตัว
  • สนับสนุน处理器เหตุการณ์
  • เหมาะสมที่สุดสำหรับโปรแกรมที่มีพื้นที่วาดใหญ่ (เช่น Google Maps)
  • ความซับซ้อนสูงอาจลดความเร็วการวาด (แบบการใช้งานที่เกินจาก DOM ไม่รวดเร็ว)
  • ไม่เหมาะสมสำหรับการใช้งานเกม