HTML5: อัพเดตฟีเจอร์ใหม่ให้ Canvas

ความสามารถอย่างหนึ่งที่น่าจับตามองของ HTML5 คือ <canvas> ที่จะทำการวาดภาพแบบ raster ขึ้นมาในกรอบที่กำหนด ความได้เปรียบของมันคือคำสั่งวาดทั้งหมดอยู่บน JavaScript ทำให้สามารถใช้ร่วมกับ setInterval เพื่อสร้างภาพเคลื่อนไหวได้อย่างง่ายดาย

แต่เนื่องจากว่า <canvas> ยังเป็นอะไรที่ใหม่มาก ทาง WHATWG ก็ได้อัพเดตความสามารถบางอย่างของมัน โดยความสามารถที่เพิ่มเข้ามารอบนี้เป็นของ canvas 2D เช่น

- มี Path ให้ใช้แล้ว จากแต่เดิมที่ต้องคอยสั่ง context.beginPath ตอนนี้สามารถสร้างมันขึ้นมาได้ง่ายๆ โดย

{syntaxhighlighter brush: jscript}
var p = new Path();
p.rect(0,0,100,100);
context.fill(p);
{/syntaxhighlighter}

• มีคำสั่งสำหรับสร้างวงรีโดยเฉพาะแล้ว

{syntaxhighlighter brush: jscript}
context.ellipse(x, y, width/2, height/2, angle, 0, Math.PI*2);
context.stroke();
{/syntaxhighlighter}

• รองรับรูปแบบคำสั่ง SVG สำหรับสร้าง Path เช่น new Path('M 100,100 h 50 v 50 h 50');
• คำสั่งเส้นประจุดแบบซับซ้อน เช่น context.setLineDash([3,1,0,1]); ให้ผลลัพท์เป็น --- . --- .
• สามารถจัดการกับ hit region ได้แล้ว

{syntaxhighlighter brush: jscript}
context.beginPath();
context.rect(10,10,100,100);
context.fill();
context.addHitRegion({ id: 'The First Button' });
context.beginPath();
context.rect(120,10,100,100);
context.fill();
context.addHitRegion({ id: 'The Second Button' });
canvas.onclick = function (event) {
if (event.region)
alert('You clicked ' + event.region);
});
{/syntaxhighlighter}

ความสามารถอื่นๆ ตามอ่านได้จากที่มาเลยครับ

ผมลองทดสอบบน Chrome 20.0.1092.0 canary แล้วยังไม่มานะครับ ก็คงต้องรออีกซักพักถึงจะได้ของเล่นชิ้นใหม่นี้กัน

ที่มา: WHATWG Lists ผ่าน I Programmer