Canvas
ก่อนอื่นต้องบอกก่อนว่า
HTML5 นั้น ไม่ได้มีแต่ฟีเจอร์เรื่องของ Video และ Audio นะจ๊ะ ยังมีฟีเจอร์อื่นๆ ที่น่าสนใจและจะเป็นตัวพลิกโฉมวงการเว็บเลยก็ว่าได้ หนึ่งในนั้นก็คือ Canvas element ซึ่งเป็นคุณสมบัติทางด้านกราฟฟิกที่มาพร้อมกับ HTML5 และเจ้า Canvas element นี่แหละที่ผมคิดว่ามันอาจจะเป็นพระเอกของ HTML5 เพราะเจ้ากราฟฟิกตัวนี้ มันสามารถทำให้คุณสามารถสร้างระบบต่างๆ ที่คุณต้องการขึ้นมา ไม่ว่าจะเป็นระบบเกมส์ หรือโปรแกรมวาดภาพบนเว็บ ที่รองรับทุก platform หลายๆ คนคงจะเคยเห็นและเล่นเกมส์แฟรช (Flash Games) ซึ่งข้อเสียของมันก็คือต้องใช้ปลั๊กอินที่ชื่อว่า Flash player และแน่นอนว่าถ้าเครื่องไหนไม่สามารถลงปลั๊กอินตัวนี้ได้ ก็จะไม่สามารถเข้าชม หรือเล่นได้นั้นเอง แต่ถ้าระบบหรือเกมส์ นั้นๆ ถูกพัฒนาด้วย HTML5 มันจะสามารถเล่นได้ทุกระบบปฏิบัติการ โดยที่ไม่จำเป็นต้องลงปลั๊กอินใดๆ เพิ่มCanvas element จะมี Tag สั้นๆ จำง่ายๆ ก็คือ ซึ่งเป็นคำสั่งที่จะใช้สร้างกราฟฟิกผ่านในตัว Canvas แต่เจ้า Canvas เองไม่สามารถทำงานได้ด้วยตัวเอง เนื่องจากมันก็ยังเป็น HTML ดีๆ นี่เอง ยังคงต้องอาศัยภาษาสคริปในการควบคุม ซึ่งจะทำงานได้ต้องอาศัยภาษา JavaScript เป็นตัวควบคุมในการทำงานต่างๆ เช่นสั่งให้วาดเส้นตรง และขีดเขียน ซึ่งในตอนที่ 1 นี้ผมจะยังไม่ลงลึกถึงวิธีการเขียน จะเล่าคร่าวๆ ก่อนว่า Canvas มันคืออะไร ตัวอย่างการแรกใช้งาน หรือการเขียน Canvas ใน HTML5 ดู Code Highlighter ด้านล่างครับ Canvas element มีคำสั่งในการควบคุมเยอะแยะเช่น วาดเส้น วงกลม สี่เหลี่ยม เส้นตรง เส้นโค้ง ฯลฯ ณ จุดนี้ผมออกปากก็เลย เพราะเดี๋ยวคงจะมีคนมาถามว่า การเขียน Canvas element ใน HTML5 นั้นยากไหม ? ผมบอกก่อนเลยครับว่า มันไม่ใช่เรื่องยาก (สักเท่าไหร่) แต่…… คนที่จะเขียนต้องมีความรู้พื้นฐานและเข้าใจในโครงสร้างของภาษา HTML และ JavaScript พอสมควร ไม่งั้นก็เหมือนหัดเขียนใหม่แหละจ๊ะ ถ้ายังนึกไม่ออกว่าcanvaselementในHTML5นั้นมันทำงานยังไงลองดูตัวอย่างนี้ http://www.krapalm.com/html5/ (ไม่รองรับ IE) ซึ่งในเรื่อง Introduction ของ Canvas element ก็คงหมดเพียงเท่านี้ ติดตามดูกันต่อในตอนที่ 2 และตอนต่อๆ ไปครับว่า Canvas มีอะไรให้เราเล่นบ้าง อ่อเกร็ดความรู้นิดหน่อย canvas element ของ HTML5 นั้นถ้าข้อมูลผมไม่ผิด Apple เป็นผู้ที่นำ canvas element ไปใช้เป็นเจ้าแรก Mac OSX Dashboard View :1168Related Post- * Z-Type เกมที่พัฒนาจาก HTML5 ได้รับแรงบรรดาลใจจากเกม The Typing of the Dead
- * เริ่มต้นเรียนรู้ HTML5 อย่างไรดี
- * Canvas element ใน HTML5 คืออะไร ? ตอนที่ 2
- * HTML5 มี Elements อะไรใหม่ๆ เพิ่มขึ้นมาบ้าง
- * เครื่องมือวาดภาพพัฒนาจาก HTML5 รองรับ Mobile device และ iPad
- * ContentEditable แก้ไขเนื้อหาในหน้าเว็บได้ทันทีด้วย HTML5
- * โลโก้ HTML5 อย่างเป็นทางการมาแล้ว
- * เก็บตกงาน GTUG BootCamp 2011 สำหรับใครที่ไม่มีโอกาสได้ไป
- * Theme Wordpress ที่ใช้ HTML5 & CSS3 ในการพัฒนา
- * 52ramework: HTML5 Frameworks ที่น่าลอง
- * ฟังบรรยายจากทีมงาน HTML5 in Thai ในหัวข้อ HTML5 : The future of website
- * HTML5 กับ Div Element หรือ Semantic Markup ที่เปลี่ยนไป
- * LeanBack: HTML5 player ที่รองรับการใส่ Subtitle เข้าไปในวีดีโอได้
- * HTML5 in Thailand ปรับโฉมใหม่ เชิญชวนมาเป็นส่วนหนึ่งของเรา
- * Aloha Editor : HTML5 Editor
หลังจากเราได้รู้แล้วว่า Canvas Element มันคืออะไร ทำงานอย่างไร จากบทความ Canvas element ใน HTML5 คืออะไร ? ตอนที่ 1 คราวนี้เราจะมาดูตอนที่ 2 กัน ซึ่งตอนนี้ผมจะมาสอนวิธีการสร้าง Canvas กัน Canvas ใน HTML5 นั้นมี attribute ที่สำคัญที่จำเป็นต้องมีหลักๆ อยู่ 3 ตัวด้วยกัน ต้องกำหนด id, width, และ height ทั้ง 3 ตัวเป็น attribute ที่จำเป็นสำหรับ Canvas Element อย่างแรกทำไทต้องกดหนด id ให้ ตรงถ้าใครที่เคยพัฒนาเว็บมาอยู่แล้วก็คงทราบๆ กันดีว่าเพื่ออะไร แต่ใครไม่ทราบผมจะอธบายสั้นๆ ละกันครับ กำหนด ID ก็เพื่อให้ง่ายต่อการเรียกใช้งานหรือเข้าถึง Element นั้นๆ แน่อนครับเวลาจะใช้งานต้องเปิด Element ด้วย
ตัวอย่างการใช้งาน Canvas Element ใน HTML5width="200" height="100">
อย่าง ที่ผมบอกในบทความก่อนครับ Canvas Element นั้นเป็นเหมือนคำสั่งที่จะใช้สร้างกราฟฟิก แต่เจ้า Canvas เองไม่สามารถทำงานได้ด้วยตัวเอง เนื่องจากมันก็ยังเป็น HTML ดีๆ นี่เอง ยังคงต้องอาศัยภาษาสคริปในการควบคุม ซึ่งจะทำงานได้ต้องอาศัยภาษา JavaScript เป็นตัวควบคุมในการทำงานต่างๆ เช่นสั่งให้วาดเส้นตรง และขีดเขียน เรามาดูคำสั่ง JavaScript ที่จะควบคุมให้เจ้า Canvas สามารถวาดภาพที่เราต้องการได้อย่างไร
จะเห็นว่าชุดคำสั่ง JavaScript ชุดนี้ได้เข้าถึง Element ที่ ID ที่ชื่อว่า myCanvas นั้นเองครับ สังเกตได้จากบรรทัด
var c=document.getElementById("myCanvas");จากนั้นเมื่อหา Element ดังกล่าวเจอก็จะทำการสร้าง context object ขึ้นมา
var cxt=c.getContext("2d");คำ สั่งบรรทัดนี้ ตรง getContext(“2d”) เป็น built-in object ที่มาพร้อมกับ HTML5 ซึ่งจะประกอบไปด้วยคำสั่งต่างๆ เช่น คำสั่งวาดเส้นตรง วงกลม รูปสี่เหลี่ม ตัวหนังสือ รูปภาพ หรืออื่นๆ
ต่อมาก็เป็นการสร้างรูปสี่เหลี่ยมพื่นภาพสีแดงขึ้นมา
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
อ่อเกือบลืม ไอ้ตรง c. หรือ cxt. นี่คงเข้าใจนะครับว่ามันคืออะไร มันเป็นชุดคั่งสั่งของ JavaScript มาต่อกันเลยละกัน fillStyle นั้นเป้นการกำหนดสีแดงลงไป ส่วน fillRect เป็นการกำหนด รูปร่าง ตำแหน่ง แล้วก็ขนาดของวัตถุ
ผลที่ได้จากคำสั่งก็เป็นดังรูปด้านบน
-----------------------------------------------------------------------------------------
canvas 
My memory isn't very good and I often find myself looking up simple things in various specs but sometimes they're just too damn long-winded when you're simply looking for argument x of function y. That's where cheat sheets and reference cards come in handy with their compact, bare-bones information crammed into, at most, a few pages. There are cheat sheets for just about anything out there but I couldn't find one for the HTML5 canvas element, so I decided to do something about that, mostly for my own sake but if other people find it useful that's just all the better.
The information is pretty much just a copy of what is found in the WHATWG specs, just condensed and hopefully a bit easier to read. There are virtually no explanations, however, and no examples other than some graphics for compositing values and a few other things (the appearance of which is very much inspired by those found in Mozilla's examples). So, it's basically just a listing of the attributes and methods of the canvas element and the 2d drawing context.
