ความแตกต่างระหว่าง canvas และ svg

compare canvas and svg
การวาดภาพ Graphic ใน HTML 5 มี 2 รูปแบบด้วยกันคือการวาดลงบน Canvas และการใช้ SVG ซึ่งทั้ง 2 แบบนั้นวาดภาพได้เหมือนกันแต่จะมีข้อแตกต่างกันคือ

ถ้าวาดลงบน Canvas ภาพจะเป็น Bitmap ซึ่งถ้า Zoom เข้าไปมากๆ ภาพจะแตกซึ่งเป็นลักษณะทั่วไปของ Bitmap และ การวาดใช้ JavaScript เมื่อต้องการแก้ไขภาพใหม่ต้อง excute JavaScript ส่วนนั้นใหม่ทั้งหมด

แต่ถ้าวาดด้วย SVG ภาพที่ได้จะเป็น Vector ไม่ว่าจะ Zoom เข้าไปเท่าไหร่ภาพก็จะไม่แตก และอีกข้อสำคัญก็คือ SVG เป็น XML ดังนั้นถ้าจะทำการแก้ไขภาพสามารถ

เขียน JavaScript เข้าไปแก้ไขข้อมูลใน DOM ได้โดยที่ไม่ต้อง execute ใหม่ เหมือนกับเราใช้ JavaScript เข้าไปแก้ไข DOM ใน HTML ธรรมดานั่นเอง

ลองเข้าไปทดสอบ Code ได้ด้วยตัวเองที่นี่
http://jsfiddle.net/DQXuv/
ไม่สามารถแสดงผลได้ใน IE 8 ลงมา

หรือเข้าไปดูผลลัพธ์แบบ Full Screen ที่นี่
http://jsfiddle.net/DQXuv/embedded/result/
ลอง Zoom โดยกด Ctrl ค้างไว้แล้วเลื่อนเมาส์ปุ่มตรงกลางขึ้น หรือหาเมนู Zoom ในแต่ละ Browser

Raphael JavaScript Framework สำหรับวาด graphic

ถ้าพูดถึงการวาดรูปภาพด้วย SVG ต้องทำการเขียน Tag XML ที่ยุ่งยากเต็มไปหมดต้องกำหนด Position ต่างๆกัน วุ่นวาย แต่วันนี้เรามีทางเลือกใหม่นั่นคือการใช้ Raphael ซึ่งเป็น JavaScript สำหรับการวาดภาพ Graphic ที่เป็น SVG ผลลัพธ์ที่ได้จะเป็น SVG ซึ่ง

เป็น Vector ตอนขยายภาพจะไม่แตก จะไม่เหมือนกับการใช้ JavaScript วาดลงบน Canvasณ ปัจจุบันเป็น Version 2.1 แล้วการใช้งานง่ายมาก และน่าสนใจสำหรับนำไปประยุกต์ใช้งาน ในตัวอย่างนี้จะเป็นการใช้งานเบื้องต้นโดยจะทำการสร้าง canvas ขึ้นมาก่อน อันนี้ผมใช้ตัวแปรชื่อว่า Canvas เฉยๆ ให้มันเหมือนกับวาดลงบน Canvas แต่ผลลัพธ์ที่ได้จะเป็น SVG

โดย Raphael(0 , 0, 300, 300) จะได้เป็นพื้นที่ขนาด 300 x 300( parameter ตัวที่ 3 กับ 4) เริ่มต้นที่ตำแหน่ง (0, 0) หลังจากที่ได้พื้นที่สำหรับใช้วาดรูปแล้ว ที่เหลือก็แค่วาดรูปลงกลมลงไปโดยใช้คำสั่ง circle(50, 50, 20) หมายถึง จุดศุูนย์กลางของวงกลมเริ่มต้นที่ตำแหน่ง 50, 50 นับจากมุมซ้ายบนของ Canvas แล้วก็กำหนดให้มีรัศมีเป็น 20 สุดท้ายลงสีแดง เท่านี้เอง

ลองเข้าไปแก้ไข Code ได้ที่
http://jsfiddle.net/irobust/h8Epg/

หรือดูผลลัพธ์แบบ Full Screen ได้ที่
http://jsfiddle.net/irobust/h8Epg/embedded/result/