ก่อนอื่นต้องบอกก่อนว่า HTML5 นั้นไม่ได้มีแต่ฟีเจอร์เรื่องของ Video และ Audio นะจ๊ะ ยังมีฟีเจอร์อื่นๆ ที่น่าสนใจและจะเป็นตัวพลิกโฉมวงการเว็บเลยก็ว่าได้ หนึ่งในนั้นก็คือ Canvas element ซึ่งเป็นคุณสมบัติทางด้านกราฟฟิกที่มาพร้อมกับ HTML5 และเจ้า Canvas element นี่แหละที่ผมคิดว่ามันอาจจะเป็นพระเอกของ HTML5 เพราะเจ้ากราฟฟิกตัวนี้ มันสามารถทำให้คุณสามารถสร้างระบบต่างๆ ที่คุณต้องการขึ้นมา ไม่ว่าจะเป็นระบบเกมส์ หรือโปรแกรมวาดภาพบนเว็บ ที่รองรับทุก platform หลายๆ คนคงจะเคยเห็นและเล่นเกมส์แฟรช (Flash Games) ซึ่งข้อเสียของมันก็คือต้องใช้ปลั๊กอินที่ชื่อว่า Flash player และแน่นอนว่าถ้าเครื่องไหนไม่สามารถลงปลั๊กอินตัวนี้ได้ ก็จะไม่สามารถเข้าชม หรือเล่นได้นั้นเอง แต่ถ้าระบบหรือเกมส์ นั้นๆ ถูกพัฒนาด้วย HTML5 มันจะสามารถเล่นได้ทุกระบบปฏิบัติการ โดยที่ไม่จำเป็นต้องลงปลั๊กอินใดๆ เพิ่ม
Canvas element จะมี Tag สั้นๆ จำง่ายๆ ก็คือ <canvas></canvas> ซึ่งเป็นคำสั่งที่จะใช้สร้างกราฟฟิกผ่านในตัว Canvas แต่เจ้า Canvas เองไม่สามารถทำงานได้ด้วยตัวเอง เนื่องจากมันก็ยังเป็น HTML ดีๆ นี่เอง ยังคงต้องอาศัยภาษาสคริปในการควบคุม ซึ่งจะทำงานได้ต้องอาศัยภาษา JavaScript เป็นตัวควบคุมในการทำงานต่างๆ เช่นสั่งให้วาดเส้นตรง และขีดเขียน ซึ่งในตอนที่ 1 นี้ผมจะยังไม่ลงลึกถึงวิธีการเขียน จะเล่าคร่าวๆ ก่อนว่า Canvas มันคืออะไร ตัวอย่างการแรกใช้งาน หรือการเขียน Canvas ใน HTML5 ดู Code Highlighter ด้านล่างครับ
<canvas id="testCanvas" width="200" height="100"></canvas>
Canvas element มีคำสั่งในการควบคุมเยอะแยะเช่น วาดเส้น วงกลม สี่เหลี่ยม เส้นตรง เส้นโค้ง ฯลฯ ณ จุดนี้ผมออกปากก็เลย เพราะเดี๋ยวคงจะมีคนมาถามว่า การเขียน Canvas element ใน HTML5 นั้นยากไหม ? ผมบอกก่อนเลยครับว่า มันไม่ใช่เรื่องยาก (สักเท่าไหร่) แต่…… คนที่จะเขียนต้องมีความรู้พื้นฐานและเข้าใจในโครงสร้างของภาษา HTML และ JavaScript พอสมควร ไม่งั้นก็เหมือนหัดเขียนใหม่แหละจ๊ะ ถ้ายังนึกไม่ออกว่า canvas element ใน HTML5 นั้นมันทำงานยังไง ลองดูตัวอย่างนี้ครับ http://www.krapalm.com/html5/ (ไม่รองรับ IE) ซึ่งในเรื่อง Introduction ของ Canvas element ก็คงหมดเพียงเท่านี้ ติดตามดูกันต่อในตอนที่ 2 และตอนต่อๆ ไปครับว่า Canvas มีอะไรให้เราเล่นบ้าง
อ่อเกร็ดความรู้นิดหน่อย canvas element ของ HTML5 นั้นถ้าข้อมูลผมไม่ผิด Apple เป้นผู้ที่นำ canvas element ไปใช้เป็นเจ้าแรก Mac OSX Dashboard จร้า
View :1798
