HTML5 Canvas : 드로잉이 완료되면 이벤트 가져 오기

캔버스 요소에 이미지를 드로잉합니다. 그런 다음이 프로세스에 의존하는 코드를 완성해야합니다. 내 코드는 다음과 같습니다.HTML5 Canvas : 드로잉이 완료되면 이벤트 가져 오기

var myContext = myCanvasElement.getContext('2d'), 
    myImg = new Image(); 

myImg.onload = function() { 
    myContext.drawImage(containerImg, 0, 0, 300, 300); 
}; 

myImg.src = "someImage.png";

이제 drawImage가 완료되면 알림을 받으려합니다. 사양을 확인했지만 이벤트 나 콜백 함수를 전달할 가능성을 찾을 수 없습니다. 지금까지는 제한 시간을 설정했지만 분명히 그렇게 지속 가능성이 낮습니다. 이 문제를 어떻게 해결합니까?

출처

2012-06-26 elHornair

거의 모든 자바 스크립트 기능과 마찬가지로 drawImage은 동기입니다.

즉, 실제로 수행 한 작업이 완료된 후에 만 되돌아갑니다.

출처

2012-06-26 12:45:52 Alnitak

... :( – Alnitak

더 당신이 바로 내가 다시 읽고 완벽하게 이해하고, 난 그냥 새를 상상하지 dev에 "동기식"이라고 말하는 이유는 무엇입니까? 그 이유는 내 코멘트를 삭제하는 것입니다. – Loktar

@Loktar 잘하면 내 편집 잘 그냥 명확하게 추가 할 수 있습니다 :) – Alnitak

이미지가로드 될 때 이미 이벤트가 발생하고 한 가지 (무승부)를 수행합니다. 왜 다른 것을하지 않고 drawImage 이후에 원하는 기능을 수행 할 함수를 호출해야합니까? 말 그대로 단지 :

myImg.onload = function() { 
    myContext.drawImage(containerImg, 0, 0, 300, 300); 
    notify(); // guaranteed to be called after drawImage 
};

출처

2012-06-26 13:32:42

drawImage 이후에 호출되지 않는 것 같다 ... 방금 만든 테스트는 drawImage 메소드가 동기식으로 수행되지 않았다는 것을 보여 주었다. – BBog

제프 Claes가 꽤 잘 on his website을 설명합니다

브라우저로드 이미지를 비동기 스크립트가 이미 해석 및 실행 되는 동안. 이미지가 완전히로드되지 않으면 캔버스 이 렌더링되지 않습니다.

운좋게도 해결하기가 어렵지 않습니다. 이 완료되었음을 알리는 이미지에서 콜백을받을 때까지 그리기를 시작하기 만하면됩니다.

<script type="text/javascript">   
window.addEventListener("load", draw, true); 

function draw(){          
    var img = new Image(); 
    img.src = "http://3.bp.blogspot.com/_0sKGHtXHSes/TPt5KD-xQDI/AAAAAAAAA0s/udx3iWAzUeo/s1600/aspnethomepageplusdevtools.PNG";     
    img.onload = function(){ 
     var canvas = document.getElementById('canvas'); 
     var context = canvas.getContext('2d');  

     context.drawImage(img, 0, 0);   
    };    
}

@Loktar 답을 희석하지 않고 완전히 더 설명하기 어려운, 내가 생각

출처

2013-08-13 15:31:45

HTML5 Canvas : 드로잉이 완료되면 이벤트 가져 오기

답변

관련 문제