Dec
25
2011

canvas คืออะไร

An article by บริษัท เก้ายอดสตูดิโอ จำกัด

Comments Off

HTML5 Canvas

ใน HTML5 นั้นจะมี Element ที่ชื่อว่า canvas ที่เราสามารถใช้ jQuery หรือ JavaScript ควบคุมการทำงานของมันได้ ไม่ว่าจะวาดภาพ วาดวงกลม ใส่รูป เราก็สามารถใส่เข้าไปใน canvas ได้

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

Canvas นั้นก็เหมือนๆกับ Element อื่นๆครับ สามารถกำหนด Style ให้ได้ไม่ว่าจะเป็นสี ขนาดความกว้าง ความสูง กำหนดทำแหน่งได้ด้วย

ตัวอย่าง code Element canvas

1
2
3

ผลที่ได้ก็จะเหมือนๆกับเราสร้าง Element DIV ครับ เพียงแต่ว่าความสามารถของ Canvas นั้นมันมีมากกว่า และถ้าคลิกขวาที่ Canvas เราสามารถที่จะ Save ออกมาเป็น Image ได้ด้วยนะครับ

จะเห็นว่าเราสามารถใส่สีพื้นหลังหรือจะกำหนด position เป็นแบบ absolute ให้มันลอยเหนือ Element อื่นๆก็ได้นะครับ และ Canvas เราสามารถที่จะ Render ภาพทั้ง 2D หรือ 3D ในพื้นที่ของ Canvas ก็ได้นะครับ มันเจ๋งตรงนี้แหละ ไม่ต้องไปพึ่งพา Flash เลยก็สามารถที่จะเขียนให้แสดงผล 3D ได้ ( code javascript ตัวอย่างด้านล่างนี้ขอเขียนแบบธรรมดาก่อนนะครับ เพราะว่าผมยังไม่ได้ upgrade jQuery เป็น version ที่ลองรับ HTML5 Element ครับ)

Code :

1
2
3
4
5
6
7

var canvas = document.getElementById('myCanvas2');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
}

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