ক্যানভাসের প্রসঙ্গ পাওয়ার সমতুল্য jQuery

155

আমার নীচের ওয়ার্কিং কোড রয়েছে:

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

এটি ব্যবহার করার জন্য আবার লেখার কোনও উপায় আছে $? এটি করা ব্যর্থ:

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

— Claudiu
সূত্র

282

চেষ্টা করুন:

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

jQuery সংখ্যার সূচকগুলিতে আসল DOM উপাদানটি প্রকাশ করে, যেখানে আপনি সাধারণ জাভাস্ক্রিপ্ট / DOM কার্য সম্পাদন করতে পারেন।

— ঔজ্বল্যহীন
সূত্র

13

আমি আরও দেখেছি যে এটি প্রায়শই এইচটিএমএল উপাদান হিসাবে জেকারি টার্গেটটি উল্লেখ করার জন্য .get (0) ব্যবহার করা পছন্দ করে:

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

সম্ভবত কোনও সম্ভাব্য নাল অবজেক্টের রেফারেন্স এড়াতে সহায়তা করার জন্য যেহেতু jquery একটি অবজেক্ট হিসাবে নাল ফেরায় তবে .get (0) থেকে উপাদানটির সাথে কাজ করা এত নিঃশব্দে ব্যর্থ হতে পারে না ... আপনি সহজেই পরীক্ষা করতে পারেন। ক্যানভাসের আগে প্রথম পাওয়া গিয়েছিল কিনা। ) পছন্দ

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

— ওজি শন
সূত্র

1

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

সেটটাইমআউট ব্যবহার করা নিশ্চিত করার একটি সহজ উপায় আপনি ক্যানভাস উপাদানটি সম্পূর্ণরূপে তৈরি এবং ডোমে নিবন্ধিত করার আগে কল করার চেষ্টা করবেন না।

— MistyDawn
সূত্র

আপনার উত্তর দেওয়ার 8 বছর আগে এই প্রশ্ন জিজ্ঞাসা করা হয়েছিল। উত্তর দেওয়ার আগে জিজ্ঞাসার তারিখটি পরীক্ষা করে দেখুন!

— রোজো

-5

"ক্যানভাস" খুঁজে পাওয়ার আগে স্ক্রিপ্টটি কাজ করে

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

— лобазов лобазов
সূত্র