What is Canvas? คือะไรน้อ

เมื่อเราใส่ canvas ในหน้าของเราจะปรากฏ สี่เหลี่ยมขนาด 300 x 150 pixels ซึ่งเป็นค่าเริ่มต้นเมื่อเราไม่ได้ระบุค่าไป
เริ่มต้นที่ใส่ <canvas></canvas>

เมื่อใส่ canvas เข้าไปเราสามารถใช้ javascript ในการทำอะไรก็ได้ที่เราต้องการ เช่น วาดรูปอุลตร้าแมน หรือเขียนข้อความวันเกิด แม้กระทั่งภาพเคลื่อนไหวต่างๆ

canvas รองรับการเขียน 2 มิติที่เกือบทุก os รองรับ ซึ่งหากคุณเคยใช้ โปรแกรมเพื่อทำกราฟฟิค 2 มิติมาก่อน คุณจะสามารถมาใช้งานได้อย่างง่ายดาย เพราะออกแบบมาแทบจะเลียนแบบมาเลยทีเดียว (WebGL)

มาดูการทำงานกันดีกว่า เรื่มต้นด้วยการ get context มาก่อน จากนั้นก็กระทำการต่างๆ ผ่าน context สุดท้ายสั่งให้ apply แสดงบน context ลองคิดถึงการติอต่อกับ database ดูครับ เริ่ม transaction และก็ทำอย่างที่ีต้องการ สุดท้ายก็ commit ซะ ซึ่งมันก็เป็นลักษณะนั้นครับ

 

 

 

ปล. เนื้อหาอันน่าเบื่อจะดำเนินต่อไป 555 คราวหน้าจะเริ่มมีภาพบ้างแล้วนะครับ

อ้างอิงเนื้อหา : Pro HTML5 Programming , Peter Lubbers, Brian Albers, and Frank Salim

 

Canvas Overview

มารู้จัก Canvas กันเถอะ Canvas นั้นเป็นสิ่งมหัศจรรย์ของโลกใบใหม่ที่กำลังจะมาเป็นมาตรฐานครับ ใช้ในการทำ แสดงภาพกราฟฟิค (render graphic), ชาร์ต(chart), รูปภาพ (image) และภาพเคลื่อนไหว (animation) ครับ

ผู้ให้กำเนิดคือ ท่านพระเจ้าสตีฟ จ๊อบ ของเรานั่นเอง ซึ่ง Apple ใช้ Canvas ใน Mac OS X WebKit เพื่อทำ dashboard widgets

ซึ่งก่อนที่เราจะมี Canvas เรามีอะไรกันบ้างเอ่ย Adobe flash, Scalable Vector Graphics (SVG), Vector Markup Language (VML) ซึ่งเป็นของ IE เค้า

มันวิเศษยังไงหรอ ลองนึกภาพการที่เราจะวาด เส้นเฉียง โดยไม่มี canvas ซึ่งพูดง่ายแต่ทำได้ยากมากเลย

สุดท้ายนี้ขอขอบคุณ Apple ที่มอบสิทธิบัตรให้ W3C ใช้ free ๆ และมาเป็น standard ของ HTML 5 ครับ

ปล. ขอเกริ่นก่อนครับ 555 จะพยายามสรุปให้ครอบคลุม Canvas ครับ เป็น blog แรกในชีวิต 26 ปีครับ 555 ติชมกันได้ครับ 
 
อ้างอิงเนื้อหา : Pro HTML5 Programming , Peter Lubbers, Brian Albers, and Frank Salim