หลังจากเราได้รู้แล้วว่า Canvas Element มันคืออะไร ทำงานอย่างไร จากบทความ Canvas element ใน HTML5 คืออะไร ? ตอนที่ 1 คราวนี้เราจะมาดูตอนที่ 2 กัน ซึ่งตอนนี้ผมจะมาสอนวิธีการสร้าง Canvas กัน Canvas ใน HTML5 นั้นมี attribute ที่สำคัญที่จำเป็นต้องมีหลักๆ อยู่ 3 ตัวด้วยกัน ต้องกำหนด id, width, และ height ทั้ง 3 ตัวเป็น attribute ที่จำเป็นสำหรับ Canvas Element อย่างแรกทำไทต้องกดหนด id ให้ ตรงถ้าใครที่เคยพัฒนาเว็บมาอยู่แล้วก็คงทราบๆ กันดีว่าเพื่ออะไร แต่ใครไม่ทราบผมจะอธบายสั้นๆ ละกันครับ กำหนด ID ก็เพื่อให้ง่ายต่อการเรียกใช้งานหรือเข้าถึง Element นั้นๆ แน่อนครับเวลาจะใช้งานต้องเปิด Element ด้วย <canvas> และปิดด้วย </canvas>
ตัวอย่างการใช้งาน Canvas Element ใน HTML5
<canvas id="myCanvas" width="200" height="100"></canvas>
อย่างที่ผมบอกในบทความก่อนครับ Canvas Element นั้นเป็นเหมือนคำสั่งที่จะใช้สร้างกราฟฟิก แต่เจ้า Canvas เองไม่สามารถทำงานได้ด้วยตัวเอง เนื่องจากมันก็ยังเป็น HTML ดีๆ นี่เอง ยังคงต้องอาศัยภาษาสคริปในการควบคุม ซึ่งจะทำงานได้ต้องอาศัยภาษา JavaScript เป็นตัวควบคุมในการทำงานต่างๆ เช่นสั่งให้วาดเส้นตรง และขีดเขียน เรามาดูคำสั่ง JavaScript ที่จะควบคุมให้เจ้า Canvas สามารถวาดภาพที่เราต้องการได้อย่างไร
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
จะเห็นว่าชุดคำสั่ง 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 เป็นการกำหนด รูปร่าง ตำแหน่ง แล้วก็ขนาดของวัตถุ
ผลที่ได้จากคำสั่งก็เป็นดังรูปด้านบนครับ
อ้างอิงจาก w3schools.com
View :2113
ContentEditable เป็นอีกหนึ่งฟีเจอร์ที่มีมากับ HTML5 ซึ่งเป็นฟีเจอร์ใหม่ ContentEditable ฟีเจอร์นี้ถ้าแปลตรงตัวเลย ก็คือฟีเจอร์ที่ทำให้เราสามารถแก้ไข Content โดยการคลิกที่ข้อความ และสามารถแก้ไขแล้ว save ทันที การทำงานก็ควบคุมผ่านภาษา Javascript เพื่อให้ Element นั้นๆ สามารถำงานได้ การทำงานของฟีเจอร์นี้ก็จะไปสัมพันธ์กันกับ อีกหนึ่งฟีเจอร์ที่ชื่อว่า Persistent Data Storage เป็นการเก็บข้อมูลสิ่งทีเราต้องการ ไว้ในเครื่องผู้ใช้งาน ซึ่งการทำงานค้ลายๆกับ cookie แต่ Persistent Data Storage มันเก็บได้ถึงระดับดาต้าเบต ซึ่งในตอนนี้ผมยังไม่กล่าวถึง Code ของฟีเจอร์นี้จะแค่ ContentEditable ก่อนละกันครับ ซึ่งตัวอย่าง Code นั้นก็ไม่ได้ซับซ้อนอะไรมาก มี ชุดคำสั่ง HTML5 แค่ 3 บรรทัดนอกนั้นก็เปป็น Javascript อีก 10 กว่าบรรทัด ลองเอาตัวอย่าง Code นี้ไปลองศึกษาดูนะครับ Read full story
หลังจากที่อ่านบทความเกี่ยวกับ 