Tuvalin bağlamını elde etmek için jQuery eşdeğeri

Aşağıdaki çalışma kodu var:

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

Kullanmak için yeniden yazmanın bir yolu var mı $? Bunu yapmak başarısız olur:

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

Deneyin:

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

jQuery, normal JavaScript / DOM işlevlerini gerçekleştirebileceğiniz gerçek DOM öğesini sayısal dizinlerde gösterir.

Ayrıca HTML öğesi olarak bir jquery hedef başvurmak için genellikle .get (0) kullanmak tercih gördük:

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

Jquery bir nesne olarak null döndürdüğünden, ancak .get (0) öğesinden çalışmak çok sessiz bir şekilde başarısız olamayacağından, potansiyel null nesne referanslarından kaçınmanıza yardımcı olmak için ... Tuvalin ilk önce .get (0) olup olmadığını kolayca kontrol edebilirsiniz. ) sevmek

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);
}

veya...

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

SetTimeout'u kullanmak, tuval öğesini tamamen oluşturulmadan ve DOM'a kaydedilmeden önce aramayı denememenizi sağlamanın kolay bir yoludur.

Komut dosyası "canvas" ı bulmadan önce çalışır

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