องค์ประกอบนี้มีประโยชน์มากกว่าเทคโนโลยีอื่น ๆ
HTML5 ประกอบด้วยองค์ประกอบที่น่าตื่นเต้นที่เรียกว่า CANVAS มีการใช้งานมากมาย แต่เพื่อที่จะใช้คุณต้องเรียนรู้ JavaScript, HTML และบางครั้ง CSS
ทำให้องค์ประกอบ CANVAS แย่ลงเล็กน้อยสำหรับนักออกแบบหลาย ๆ คนและในความเป็นจริงส่วนใหญ่อาจละเลยองค์ประกอบนี้จนกว่าจะมีเครื่องมือที่เชื่อถือได้ในการสร้างภาพเคลื่อนไหว CANVAS และเกมโดยไม่ต้องใช้ JavaScript
ผืนผ้าใบ HTML5 ใช้สำหรับอะไร
องค์ประกอบ CANVAS HTML5 สามารถใช้กับสิ่งต่างๆมากมายที่ก่อนหน้านี้คุณต้องใช้แอปพลิเคชันแบบฝังตัวเช่น Flash เพื่อสร้าง:
- กราฟิกแบบไดนามิก
- เกมออนไลน์และออฟไลน์
- ภาพเคลื่อนไหว
- วิดีโอโต้ตอบและเสียง
ในความเป็นจริงเหตุผลหลักที่ผู้คนใช้องค์ประกอบผ้าใบเป็นเพราะวิธีที่ง่ายก็คือการเปิดหน้าเว็บธรรมดาลงในแอปพลิเคชันเว็บแบบไดนามิกและแปลงแอปพลิเคชันดังกล่าวลงในแอปบนอุปกรณ์เคลื่อนที่เพื่อใช้กับสมาร์ทโฟนและแท็บเล็ต
หากเรามี Flash เราจำเป็นต้องใช้ผ้าใบทำไม?
ตามข้อกำหนดของ HTML5 องค์ประกอบ CANVAS คือ:
"... ผืนผ้าใบบิตแมปที่ขึ้นกับความละเอียดซึ่งสามารถใช้สำหรับการแสดงกราฟกราฟฟิกเกมศิลปะหรือภาพที่มองเห็นได้ทันที"องค์ประกอบ CANVAS ช่วยให้คุณสามารถวาดกราฟกราฟฟิกเกมศิลปะและภาพจริงอื่น ๆ ได้ทันทีบนหน้าเว็บในแบบเรียลไทม์
คุณอาจคิดว่าเราสามารถทำสิ่งนี้ได้จาก Flash แต่มีความแตกต่างกันสองประการระหว่าง CANVAS และ Flash:
- องค์ประกอบ CANVAS ถูกฝังลงใน HTML แล้ว สคริปต์ที่วาดขึ้นมามีอยู่ใน HTML หรือในไฟล์ภายนอกที่เชื่อมโยง ซึ่งหมายความว่าองค์ประกอบ CANVAS เป็นส่วนหนึ่งของโมเดลวัตถุเอกสารหรือ DOM
- Flash เป็นไฟล์ภายนอกแบบฝัง ใช้องค์ประกอบ EMBED หรือ OBJECT เพื่อแสดงและไม่สามารถโต้ตอบโดยตรงกับองค์ประกอบ HTML อื่น ๆ เนื่องจากองค์ประกอบ CANVAS เป็นส่วนหนึ่งของ DOM จึงสามารถโต้ตอบกับ DOM ได้หลายวิธี
- ตัวอย่างเช่นคุณอาจสร้างภาพเคลื่อนไหวที่เปลี่ยนแปลงเมื่อส่วนอื่น ๆ ของเพจมีการโต้ตอบด้วยเช่นองค์ประกอบของฟอร์มจะเต็มไปด้วย Flash สิ่งที่คุณควรทำคือการเริ่มต้นภาพยนตร์ Flash หรือภาพเคลื่อนไหว แต่ด้วย CANVAS คุณสามารถสร้างเอฟเฟ็กต์ต่างๆได้แม้กระทั่งการเพิ่มข้อความจากฟิลด์แบบฟอร์มลงในภาพเคลื่อนไหว
- องค์ประกอบ CANVAS ได้รับการสนับสนุนโดยเว็บเบราว์เซอร์ เพื่อให้ผู้ใช้สามารถใช้ Flash ได้จริงเบราว์เซอร์ของตนต้องมีปลั๊กอินติดตั้งไว้ นี่เป็นเรื่องยุ่งยากสำหรับคนส่วนใหญ่เนื่องจากการติดตั้ง Flash ที่ล้าสมัยหรือความจริงที่ว่าระบบปฏิบัติการของพวกเขาไม่รองรับ
- เคยเป็นที่ทุกเบราว์เซอร์มีปลั๊กอินติดตั้ง แต่ที่ไม่ได้กรณีและหลายแม้จะลบปลั๊กอินเนื่องจากความยากลำบาก นอกจากนี้ยังไม่สามารถใช้ได้กับแพลตฟอร์ม iOS ที่เป็นที่นิยม
ผ้าใบมีประโยชน์แม้ว่าคุณจะไม่เคยวางแผนใช้ Flash
สาเหตุหลักประการหนึ่งที่องค์ประกอบ CANVAS สร้างความสับสนให้กับนักออกแบบจำนวนมากได้กลายมาเป็นเว็บแบบคงที่อย่างสมบูรณ์ ภาพอาจเป็นภาพเคลื่อนไหว แต่ทำด้วย GIF และแน่นอนว่าคุณสามารถฝังวิดีโอลงในหน้าเว็บได้ แต่ก็เป็นวิดีโอแบบคงที่ที่วางอยู่บนหน้าเว็บและอาจเริ่มต้นหรือหยุดทำงานเนื่องจากมีปฏิสัมพันธ์ แต่นั่นคือทั้งหมด
องค์ประกอบ CANVAS ช่วยให้คุณสามารถเพิ่มการโต้ตอบมากขึ้นในหน้าเว็บของคุณได้เนื่องจากขณะนี้คุณสามารถควบคุมกราฟิกรูปภาพและข้อความแบบไดนามิกด้วยภาษาสคริปต์ได้ องค์ประกอบ CANVAS ช่วยให้คุณสามารถเปิดรูปภาพรูปภาพแผนภูมิและกราฟเป็นองค์ประกอบภาพเคลื่อนไหว
ควรพิจารณาการใช้ Canvas Element เมื่อใด
ผู้ชมของคุณควรได้รับการพิจารณาเป็นอันดับแรกเมื่อตัดสินใจว่าจะใช้ CANVAS หรือไม่
หากผู้ชมของคุณส่วนใหญ่ใช้ Windows XP และ IE 6, 7 หรือ 8 แล้วการสร้างคุณลักษณะ Canvas แบบไดนามิกจะไม่มีจุดหมายเนื่องจากเบราว์เซอร์เหล่านั้นไม่สนับสนุนเนื้อหาดังกล่าว
หากคุณกำลังสร้างแอปพลิเคชันที่จะใช้กับเครื่อง Windows เท่านั้น Flash อาจเป็นทางออกที่ดีที่สุดของคุณ แอ็พพลิเคชันที่จะใช้บนคอมพิวเตอร์ Windows และ Mac สามารถใช้ประโยชน์จากแอ็พพลิเคชัน Silverlight
อย่างไรก็ตามหากแอปพลิเคชันของคุณต้องดูบนอุปกรณ์เคลื่อนที่ (ทั้ง Android และ iOS) รวมถึงคอมพิวเตอร์เดสก์ท็อปที่ทันสมัย (อัปเดตเป็นเบราว์เซอร์รุ่นล่าสุด) จากนั้นใช้องค์ประกอบ CANVAS เป็นทางเลือกที่ดี
โปรดจำไว้ว่าการใช้องค์ประกอบนี้ช่วยให้คุณมีตัวเลือกสำรองเช่นภาพนิ่งสำหรับเบราว์เซอร์รุ่นเก่าที่ไม่สนับสนุน
อย่างไรก็ตามคุณไม่ควรใช้ผ้าใบ HTML5 สำหรับทุกอย่าง คุณ ไม่ ควรใช้ข้อมูลนี้กับโลโก้พาดหัวหรือการนำทาง (แม้ว่าจะใช้เพื่อสร้างส่วนใดส่วนหนึ่งของภาพเหล่านี้ก็ดี)
ตามข้อกำหนดคุณควรใช้องค์ประกอบที่เหมาะสมกับสิ่งที่คุณกำลังพยายามสร้าง ดังนั้นการใช้องค์ประกอบ HEADER พร้อมกับรูปภาพและข้อความเป็นที่ต้องการของ CANVAS สำหรับส่วนหัวและโลโก้ของคุณ
นอกจากนี้หากคุณสร้างหน้าเว็บหรือแอปพลิเคชันที่ตั้งใจจะใช้ในสื่อที่ไม่ใช่แบบโต้ตอบเช่นการพิมพ์คุณควรทราบด้วยว่าองค์ประกอบ CANVAS ที่ได้รับการปรับปรุงแบบไดนามิกอาจไม่ได้พิมพ์ตามที่คุณคาดหวัง คุณอาจได้รับการพิมพ์เนื้อหาปัจจุบันหรือเนื้อหา fallback