Dec
25
2011

วิธีใช้ jQuery เรียก function getContext บน HTML5 canvas element

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

Comments Off

HTML5 canvas getContext by jQuery

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

เมื่อคืนนี้ผมลองเขียน code ในการเรียก function getContext ขึ้นมาแต่ใช้ jQuery แล้วมันไม่รู้จักกับ function นี้เลยต้องใช้ javascript แบบธรรมดาๆครับ

1
2
3
4
5
6
7

var canvas = document.getElementById('myCanvas');
if( canvas.getContext )
{
alert('function getContext is OK!!');
}else{
alert('Your browser can not support this function.');
}

พอลองทดสอบใช้ jQuery เขียนกลับไม่สามารถเรียก getContext ขึ้นมาได้

1
2
3
4
5
6
7

var canvas = $('#myCanvas');
if( canvas.getContext )
{
alert('function getContext is OK!!');
}else{
alert('Your browser can not support this function.');
}

ผมก็เลยไปค้นหาคำตอบว่าตกลงมันเป็นที่อะไรกันแน่นะ เพราะเช็คจาก version อื่นๆแล้วมันก็รู้จักกับ Element canvas นี่นา เลยใช้ firebug เช็คดูอีกรอบ เจอคำตอบเลยครับว่ามันต่างกันตรงที่เวลา select element ลองดู code ด้านล่างนี้ครับ

1
2
3
4
5
6
7

var canvas1 = document.getElementById('myCanvas');
var canvas2 = $('#myCanvas');

console.log('getElementByID :');
console.log(canvas1);
console.log('select by jQuery : ');
console.log(canvas2);

ผลที่ได้ก็คือ ถ้าหากเรา get canvas ด้วย getElementById เราจะได้ค่าเป็น element ของตัว canvas ออกมาเลย แต่ถ้าเราใช้ jQuery ในการ select มันจะได้มาเป็น object ครับลองใช้ firebug ในการทดสอบดูจะเห็นถึงความแตกต่าง

1
2
3
4
5

var canvas1 = document.getElementById('myCanvas');
var canvas2 = $('#myCanvas');

console.log( canvas1.getContext('2d') ); //DOM XHTML
console.log( canvas2[0].getContext('2d') ); //jQuery