jQuery เทียบเท่ากับการรับบริบทของ Canvas

ฉันมีรหัสการทำงานต่อไปนี้:

ctx = document.getElementById("canvas").getContext('2d');

มีวิธีเขียนใหม่เพื่อใช้$หรือไม่ การทำเช่นนี้ล้มเหลว:

ctx = $("#canvas").getContext('2d');

ลอง:

$("#canvas")[0].getContext('2d');

jQuery แสดงองค์ประกอบ DOM จริงในดัชนีตัวเลขซึ่งคุณสามารถใช้ฟังก์ชัน JavaScript / DOM ปกติ

ฉันเห็นด้วยเช่นกันว่าบ่อยครั้งที่ต้องการใช้. get (0) เพื่ออ้างอิงเป้าหมาย jquery เป็นองค์ประกอบ HTML:

var myCanvasElem = $("#canvas").get(0);

อาจช่วยหลีกเลี่ยงการอ้างอิงวัตถุ null ใด ๆ ที่เป็นไปได้เนื่องจาก jquery ส่งคืน null เป็นวัตถุ แต่การทำงานกับองค์ประกอบจาก. get (0) อาจไม่ล้มเหลวอย่างเงียบ ๆ ... คุณสามารถตรวจสอบได้อย่างง่ายดายว่าผ้าใบถูกค้นพบก่อนหรือไม่ ) ชอบ

if( $("#canvas").length ) ctx = $("#canvas").get(0).getContext('2d');
else console.log('Error: Canvas not found with selector #canvas');

try{ 
   ctx = $('#canvas').get(0).getContext('2d');
}catch(e){ 
    console.log('We have encountered an error: ' + e);
}

หรือ...

if( typeof $('#canvas') === 'undefined'){ 
    var canvas = '<canvas id="canvas"><\/canvas>';
    $('body').append(canvas);
}
setTimeout( function(){ ctx = $('#canvas').get(0).getContext('2d'); }, 500);

การใช้ setTimeout เป็นวิธีที่ง่ายเพื่อให้แน่ใจว่าคุณจะไม่ลองเรียกองค์ประกอบ Canvas ก่อนที่จะสร้างและลงทะเบียนกับ DOM อย่างสมบูรณ์

สคริปต์ทำงานก่อนที่จะพบ "canvas"

 $(document).ready(function() {
   ctx = $("#canvas");
});