วันนี้จะเขียนถึง Canvas element สั้นๆครับเพื่อปูเนื้อหาไปยังส่วนที่ลงลึกไปอีก ถือว่าเป็น Intro กันก่อนก็แล้วกันนะครับ จริงๆแล้วสิ่งใหม่ๆที่เพิ่มเข้ามาใน HTML5 นั้นมีเยอะพอสมควรแล้วก็สิ่งที่เด่นๆนั้นก็มีพอสมควรเช่นกัน แต่ผมว่า Canvas เนี่ยแหละเป็นอีกตัวเด่นเลยที่จะต้องมีการใช้งานเยอะพอสมควร

หลังจากที่เมื่อวานได้เขียนบทความเกี่ยวกับ HTML5 Element ที่ชื่อว่า Canvas ไปแล้วและเจอกับปัญหาเล็กๆน้อยๆในการใช้ jQuery เพื่อที่จะ select เอา canvas element ตัวที่ต้องการออกมา ซึ่งสามารถที่จะ select ตัว element canvas ได้แต่พบว่าไม่สามารถเรียก function getContext ได้ ตอนแรกคิดว่าน่าจะเกิดจาก version ของ jQuery ที่ใช้ในเว็บ (1.4) แต่พอลองไปเช็คดูทุกๆ version แล้วปรากฎว่าไม่ได้เป็นที่ version ของ jQuery แต่อย่างใด ก็เลยมาเขียนแชร์ให้เพื่อนๆได้อ่านกันสั้นๆครับ

ใน HTML5 นั้นจะมี Element ที่ชื่อว่า canvas ที่เราสามารถใช้ jQuery หรือ JavaScript ควบคุมการทำงานของมันได้ ไม่ว่าจะวาดภาพ วาดวงกลม ใส่รูป เราก็สามารถใส่เข้าไปใน canvas ได้ ถ้าเพื่อนๆที่เคยใช้พวก Java applet คงจะพอนึกภาพออกนะครับว่า Canvas นั้นมันก็เป็นพื้นที่สี่เหลี่ยมที่เอาไว้ใช้แสดงผลกราฟฟิก ที่เราสามารถจะควบคุมได้ สามารถควบคุมในระดับ pixel ได้เลยทีเดียว

ถ้าจะเขียน HTML5 แล้วละก็ ต้องมาทำความรู้จักกับ Badge หรือสัญญาลักษณ์ต่างๆของ HTMl5 กันก่อนนะครับว่าแต่ละอันนั้นหมายความว่ายังไง Badge ต่างๆของ HTML5 นี้ผมเอามาจากเว็บ w3c นะครับไม่ได้มั่วหรือว่าเอามาจากเว็บอื่นๆ เพราะว่าต่อไปนี้ Badge ต่างๆเหล่านี้จะไปปรากฎบนหน้าเว็บที่รองรับการทำงานของ HTML5 จะเป็นตัวที่บอกว่า เว็บนั้นๆ Support อะไรบ้าง

เมื่อไม่กี่วันมานี้เพื่อนๆคงได้ลองเข้าไป Google แล้ว Search คำว่า “Let it snow” กันมาบ้างแล้วนะครับ หลายๆคนชื่นชอบ Effect ตัวนี้กันมาก ถึงจะเป็นแค่ลูกเล่นเล็กๆ แต่ก็สร้างความฮือฮาได้มากทีเดียวเลย Google ได้โชว์ลูกเล่นของ HTML5 ให้ชาวโลกได้เห็นกัน ซึ่งจริงๆแล้วในหน้าของ Google Search เองนั้นตรง Logo มีการนำเอา HTML5 มาทำตรง Google Doodle ให่ได้เล่นกันตามช่วงต่างๆ