context.drawImage는 이상하게

Question

내가 가진 : 다음

<canvas id='canvas' width="300" height="409" style="border:2px solid darkblue" > 
</canvas> 

그리고 : IE 10에서

<script type="text/javascript"> 
    var canvas = document.getElementById('canvas'); 
    var context = canvas.getContext('2d'); 
    var image = new Image(); 
    image.src = 'http://4.bp.blogspot.com/...-21+Kingfisher.JPG'; 
    alert(image.src); 
    context.drawImage(image, 0, 0, 300, 400); 
</script> 

이 이미지는 "예상 할 수있는"로 그린됩니다. 그러나 경고 문구를 제거하면 그림이 그려지지 않습니다!

크롬에서는 알림 문과 상관없이 내 로컬 PC에 이미지가 그려지지 않습니다.

어떤 일이 벌어 질 수 있습니까? 바이올린은 here

Answer 1

입니다. 이미지로드는 비동기 작업이기 때문입니다. 경고 호출은 이미지로드가 완료 될 수 있도록 브라우저가 약간 기다리는 것을 도와줍니다. 그러므로 이미지는 다음에 나오는 drawImage에서 볼 수 있습니다.

이를 구현하는 올바른 방법은 코드이 방법을 사용하는 것입니다

var canvas = document.getElementById('canvas'); 
var context = canvas.getContext('2d'); 
var image = new Image(); //document.createElement('img'); for Chrome due to issue 

// add a onload handler that gets called when image is ready 
image.onload = function() { 
    context.drawImage(this, 0, 0, 300, 400); 
} 

// set source last so onload gets properly initialized 
image.src = 'http://4.bp.blogspot.com/...-21+Kingfisher.JPG'; 

그냥 간단하게 함수 호출 수 있었다 온로드에 대한 콜백 내부 그리기 작업 :

image.onload = nextStep; 
// ... 

function nextStep() { 
    /// draw image and other things... 
}