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