2009-10-23 2 views
5

는 동적으로과 같이 jQuery를 통해 페이지에 X 캔버스 요소를 추가하고있다 : 그들은 즉시 일이되어 있기 때문에캔버스를 조작 할 준비가 된 시점을 감지하는 방법은 무엇입니까?

$(document).ready(function() { 
    for(i=0;i<4;i++) { 
     var can = $(document.createElement("canvas")) 
        .attr("id","table"+i) 
        .addClass("table") 
        .attr("width",640) 
        .attr("height",480) 
        .appendTo('#container'); 
    } 

    //... 
}); 

어느 .append().appendTo()은 콜백을 가지고있다. 불행하게도, 캔버스 요소에 대한 어떤 것이 즉시 발생하지는 않습니다.

캔버스 요소 중 하나에서 .getContext('2d')으로 이동하면 "getContext is not a function."과 함께 실패합니다. 이것은 FF 3.5뿐만 아니라 크롬에서도 발생합니다.

해당 이벤트에서 .click()과 같은 캔버스 요소에 임의의 이벤트 처리기를 할당하고 .getContext()을 사용하면 완벽하게 작동합니다.

캔버스를 조작 할 준비가되었는지 효과적으로 결정하려면 어떻게해야합니까?

답변

5

can 변수에 getContext()을 사용할 수 있다고 생각하지 않습니다.

이렇게하는 경우 can[0].getContext()을 사용해보세요. 이것은 실제로 jQuery가 아닌 요소 객체를 가져옵니다.

+0

오, 분명한 실수입니다! 그게 제가 그 문서를 포장하지 않은 이전 버전이었습니다. jQuery에서 .createElement를 사용하고, 내가했을 때 보상하지 않았다. –

0

먼저 브라우저에 버그 보고서가 있는지 확인합니다.

한편, setInterval 또는 대다수의 루프를 사용하여 .getContext (대괄호없이)가 true인지 여부를 확인하고 이후에만 진행할 수 있습니다 (일부 현명한 한계로 인해 브라우저를 멈추지 않음). 무언가가 잘못되거나 사용자가 브라우저에 해당 기능이없는 경우 무한 루프가 발생합니다.)

+0

(이것은보기에는 좋지 않지만 전혀 효과적이지는 않지만 사용하기가 더 좋을 수는 없습니다.) : – Kev

0

캔버스의 DOMReady 이벤트에 함수를 연결할 수 있습니다.

+0

멋지게 들리 겠지만, 효과가 있기를 바랍니다. – Kev

+0

jQuery를 사용하면 어떻게됩니까? $ (canvaselement) .ready (function() {}); 실제로는 트리거되지만 getContext는 여전히 사용할 수 없습니다 .. –

관련 문제