ความคิดเห็น: Canvas และ SVG สามารถช่วยให้คุณสามารถวาดรูปภาพในเบราว์เซอร์ได้ แต่หลักการพื้นฐานของพวกเขาแตกต่างกัน ต่อไปเราจะแนะนำหลักการวาดภาพของผ้าใบและ SVG เพื่อนที่สนใจสามารถเรียนรู้ได้
Canvas และ SVG ทั้งคู่อนุญาตให้คุณวาดรูปภาพในเบราว์เซอร์ แต่หลักการพื้นฐานของพวกเขาแตกต่างกันSVG
SVG เป็นภาษาที่อธิบายกราฟิกสองมิติใน XML
SVG นั้นใช้ XML ซึ่งหมายความว่าทุกองค์ประกอบมีอยู่ภายใน SVG DOM คุณสามารถเพิ่มตัวจัดการเหตุการณ์ JS ในแต่ละองค์ประกอบ
ใน SVG แต่ละกราฟจะถูกบันทึกเป็นวัตถุ หากคุณสมบัติของวัตถุ SVG มีการเปลี่ยนแปลงเบราว์เซอร์สามารถสร้างกราฟิกใหม่โดยอัตโนมัติ
ผ้าใบ
Canvas สามารถวาดกราฟิก 2D ได้ (โดยใช้ JS)
ผืนผ้าใบสามารถสร้างใหม่ได้ด้วยพิกเซล
ในผืนผ้าใบเมื่อกราฟิกเสร็จสมบูรณ์พวกเขาจะถูกลืมโดยเบราว์เซอร์ หากตำแหน่งกราฟิกคือการเปลี่ยนแปลงหน้าจอทั้งหมดจะต้องทาสีใหม่รวมถึงวัตถุที่ครอบคลุมโดยกราฟิก
การเปรียบเทียบระหว่างผ้าใบและ SVG
ตารางต่อไปนี้แสดงความแตกต่างหลักระหว่าง Canvas และ SVG:
ผ้าใบ SVG
ขึ้นอยู่กับความละเอียดขึ้นอยู่กับการแก้ปัญหา
ไม่รองรับตัวจัดการเหตุการณ์
ความสามารถในการเรนเดอร์ข้อความที่อ่อนแอนั้นเหมาะสมที่สุดสำหรับแอปพลิเคชันที่มีพื้นที่แสดงผลขนาดใหญ่ (Google Maps)
คุณสามารถบันทึกภาพสุดท้ายเป็นรูปภาพที่ซับซ้อน PNG หรือ JPG และการทาสีใหม่จะช้าลง (สถานการณ์ใด ๆ ที่ใช้ DOM จะช้าลง)
เกมกราฟิกที่ดีที่สุดที่เหมาะสำหรับวัตถุจำนวนมากที่มักจะวาดใหม่ไม่เหมาะสำหรับแอปพลิเคชันเกม