ความสามารถอย่างหนึ่งที่น่าจับตามองของ 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
on
อัพเดท -> อัพเดต ย่อหน้าสอง
nuntawat Fri, 06/04/2012 - 06:26
WHATWG
neizod Fri, 06/04/2012 - 06:34
In reply to อัพเดท -> อัพเดต ย่อหน้าสอง by nuntawat
ขออภัย
nuntawat Fri, 06/04/2012 - 10:12
In reply to WHATWG by neizod
ขออภัย อีกนิดเดียวครับ
อ้าว ปุ่ม edit หาย T__T
neizod Fri, 06/04/2012 - 13:24
In reply to ขออภัย by nuntawat
อ้าว ปุ่ม edit หาย T__T
กด F5 รัวๆ
PaPaSEK Fri, 06/04/2012 - 19:31
In reply to อ้าว ปุ่ม edit หาย T__T by neizod
กด F5 รัวๆ