jQuery tương đương với việc lấy bối cảnh của Canvas

Tôi có mã làm việc sau đây:

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

Có cách nào để viết lại nó để sử dụng $? Làm điều này thất bại:

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

Thử:

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

jQuery trưng ra phần tử DOM thực tế trong các chỉ mục số, nơi bạn có thể thực hiện các hàm JavaScript / DOM bình thường.

Tôi cũng đã thấy rằng nó thường được ưu tiên sử dụng .get (0) để tham chiếu mục tiêu jquery dưới dạng phần tử HTML:

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

Có lẽ để giúp tránh mọi tham chiếu đối tượng null tiềm năng vì jquery trả về null dưới dạng đối tượng nhưng làm việc với phần tử từ .get (0) có thể không thất bại một cách im lặng ... Bạn có thể dễ dàng kiểm tra xem canvas có được tìm thấy trước hay không .get (0 ) giống

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

hoặc là...

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

Sử dụng setTimeout là một cách dễ dàng để đảm bảo bạn không thử gọi phần tử canvas trước khi nó được tạo và đăng ký hoàn toàn vào DOM.

Kịch bản hoạt động trước khi nó tìm thấy "canvas"

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