Canvas의 컨텍스트를 얻는 것과 동등한 jQuery

다음 작업 코드가 있습니다.

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

다시 사용하여 쓸 수있는 방법이 $있습니까? 이렇게하면 실패합니다 :

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

시험:

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

jQuery는 일반적인 JavaScript / DOM 기능을 수행 할 수있는 실제 DOM 요소를 숫자 인덱스로 표시합니다.

또한 jquery 대상을 HTML 요소로 참조하기 위해 .get (0)을 사용하는 것이 선호되는 경우가 많습니다.

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

jquery가 null을 객체로 반환하기 때문에 잠재적 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을 사용하면 캔버스 요소가 완전히 작성되어 DOM에 등록되기 전에 캔버스 요소를 호출하지 않도록하는 쉬운 방법입니다.

"캔버스"를 찾기 전에 스크립트가 작동합니다

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