jQuery के कैनवास के संदर्भ को प्राप्त करने के बराबर है

Question

मेरे पास निम्नलिखित कार्य कोड है:

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

क्या इसका उपयोग करने के लिए फिर से लिखने का कोई तरीका है $? ऐसा करना विफल होता है:

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

Answer 1

प्रयत्न:

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

jQuery, वास्तविक DOM तत्व को न्यूमेरिक इंडेक्स में उजागर करता है, जहाँ आप सामान्य JavaScript / DOM फ़ंक्शन कर सकते हैं।

Answer 2

मैंने यह भी देखा है कि HTML तत्व के रूप में jquery लक्ष्य का संदर्भ देने के लिए अक्सर .get (0) का उपयोग करना पसंद किया जाता है:

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

शायद किसी भी संभावित अशक्त वस्तु संदर्भों से बचने में मदद करने के लिए क्योंकि jquery एक वस्तु के रूप में शून्य देता है लेकिन .get से तत्व के साथ काम करना (0) इतना चुपचाप विफल नहीं हो सकता है ... आप आसानी से जांच सकते हैं कि कैनवास पहले पाया गया था। (0) ) पसंद

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

Answer 3

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

सेटटाइमआउट का उपयोग करना यह सुनिश्चित करने का एक आसान तरीका है कि आप कैनवास तत्व को कॉल करने का प्रयास न करें, इससे पहले कि वह पूरी तरह से बनाया और पंजीकृत हो।

Comments

यह प्रश्न आपसे उत्तर देने से 8 साल पहले पूछा गया था। उत्तर देने से पहले पूछी गई तारीख की जाँच करें!

— रोजो

Answer 4

स्क्रिप्ट "कैनवास" खोजने से पहले काम करती है

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