캔버스의 컨텍스트를 가져오는 것과 동일한 jQuery

캔버스의 컨텍스트를 가져오는 것과 동일한 jQuery

다음과 같은 작업 코드가 있습니다.

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

다시 써서 사용할 수 있는 방법이 있습니까?$작업 실패:

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

시도:

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

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

또한 쿼리 대상을 HTML 요소로 참조하기 위해 .get(0)을 사용하는 것이 종종 선호된다는 것을 보았습니다.

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

jquery가 null을 객체로 반환하지만 .get(0)의 요소로 작업하는 것이 그렇게 조용하게 실패하지 않을 수 있기 때문에 잠재적인 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에 등록되기 전에 캔버스 요소를 호출하지 않아도 됩니다.

이것을 먹어보세요.

let ctx = $('message')[0]

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

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

언급URL : https://stackoverflow.com/questions/2925130/jquery-equivalent-of-getting-the-context-of-a-canvas