html5-เริ่มต้นเขียน

HTML5 เริ่มต้นเขียนเว็บแอพพลิเคชั่นด้วย Canvas

HTML5 เริ่มต้นเขียนเว็บแอพพลิเคชั่นและเกมส์ด้วย Canvas



Canvas คือ Element อย่างหนึ่งเป็นคุณสมบัติที่เกิดขึ้นมาพร้อมกับภาษา HTML5 เป็นหนึ่งในหลาย ๆ ความสามารถของภาษา
เราสามารถใช้ภาษา Javascript เขียนโปรแกรมคำสั่งและความสามารถของ Canvas Element เพื่อวาด Graphic
ในรูปแบบ 2D เพื่อแสดงผลบนหน้าเว็บไซต์ได้


ตัวอย่างการเริ่มใช้งาน html5 canvas

จากตัวอย่างด้านล่าง สังเกตุที่ canvas element จะไม่ได้กำหนดความกว้างและความสูงของ canvas ไว้ ในกรณี
ที่เราไม่ได้กำหนดความค่า Width & Height ของ canvas ไว้ ค่า default ความกว้างความสูงของ canvas จะมี
ค่า Width = 300 และ Height = 150

เราสามารถกำหนดค่า width และ height ของ canvas ได้เพียงแค่เพิ่ม attribue ทั้ง 2 เข้าไปดังนี้


วิธีเขียน graphic 2d ลงใน canvas

เราสามารถเขียนโปรแกรมคำสั่งต่าง ๆ โดยใช้ภาษา Javascript ในรูปแบบ 2D บน canvas ได้ โดยเริ่มต้น
ต้องกำหนดก่อนว่าเราจะเขียนลงใน canvas ตัวไหนและทุก canvas จะมี context 2d ติดมาด้วย
เราจะเขียน graphic ต่าง ๆ ลงใน context 2d นี่แหล่ะครับ ดูตัวอย่าง



html 5 canvas วาดวงกลม

ทดลองเปลี่ยนสีพื้นของ canvas โดยใช้คำสั่ง javascript style เพื่อกำหนด backgroundColor

ตัวอย่างโค๊ดทั้งหมด

Summary
HTML5 เริ่มต้นเขียนเว็บแอพพลิเคชั่นและเกมส์ด้วย Canvas
Article Name
HTML5 เริ่มต้นเขียนเว็บแอพพลิเคชั่นและเกมส์ด้วย Canvas
Description
Canvas คือ Element อย่างหนึ่งเป็นคุณสมบัติที่เกิดขึ้นมาพร้อมกับภาษา HTML5 เป็นหนึ่งในหลาย ๆ ความสามารถของภาษา เราสามารถใช้ภาษา Javascript เขียนโปรแกรมคำสั่งและความสามารถของ Canvas Element เพื่อวาด Graphic ในรูปแบบ 2D เพื่อแสดงผลบนหน้าเว็บไซต์ได้
Author
Publisher Name
บริษัท โค๊ดบี จำกัด
Publisher Logo

กระทู้ใกล้เคียง

HTML5 Canvas เซฟรูปจากแคนวาสด้วย jQuery Ajax และ P... HTML5 Canvas เซฟรูปจากแคนวาสด้วย jQuery Ajax และ PHP ตัวอย่าง HTML5 Canvas เซฟรูป การเขียนโปรแกรมด้วย Javascript บนแคนวาส Canvas เป็นความส...
HTML5 โหลดรูปเข้ามาแสดงใน Canvas ด้วย Ajax... HTML5 โหลดรูปเข้ามาแสดงใน Canvas ด้วย Ajax ใน HTML5 Canvas เราสามารถโหลดรูปให้เสร็จก่อนและใช้คลาส new Image() โหลดรูปอีกรอบหนึ่งก่อนที่ใช้ คำสั่ง ...
แปลง flash จัดการกับ flash ในเว็บเก่าให้เป็น html5... แปลง flash จัดการกับ flash ให้กลายเป็น html5 หากย้อนกลับไป 3-4 ปีที่ผ่านมา flash คือเทคโนโลยีสำหรับการสร้างงาน animation และงาน Interactive ที่นัก...
วิธีทำเว็บ ให้โหลดเร็ว เทคนิคเพิ่มความเร็วให้เว็บไ... วิธีทำเว็บ ให้โหลดเร็ว เทคนิคเพิ่มความเร็วให้เว็บไซต์ วิธีทำเว็บ ให้โหลดเร็ว เคยไหมครับที่คลิกลิงค์ข่าวจาก facebook เพราะอ่านคำโปรยแล้ว อยากจะเข้...

Comments

comments