html javascript 코드가 제대로로드되지 않았습니다.

Question

function drawimage() 
{ 
var f=document.getElementById("myCanvas"); 
    var cxt1=f.getContext("2d"); 
    var img1=new Image(); 
    img1.src="image.jpg"; 
    cxt1.drawImage(img1,0,0,750,400); 
} 

<canvas id="myCanvas" width="1125" height="600" style="border:1px solid #c3c3c3;"> 
</canvas> 
<script type="text/javascript"> 

drawimage(). 

이것은 내 자바 스크립트입니다. 그러나 브라우저에서이 스크립트를 실행하면 테두리 만 첫 번째로 표시되고 이미지는 페이지를 새로 고친 후에 만 ​​나타납니다. 이 코드의 문제점은 무엇입니까?

Answer 1

는 "로드"핸들러에서 그림 이미지를 수행하십시오 :

var img1=new Image(); 
img1.src="image.jpg"; 
img1.onload = function() { 
    cxt1.drawImage(img1,0,0,750,400); 
}; 

Answer 2

브라우저가 충분히 빠른 경우 때문에 img1.src 라인은 온로드 이후 여야합니다 (+ 어쩌면 이미지를 캐시하거나 로컬 호스트입니다) img1.src가 설정된 직후에 이미지가로드됩니다. 이 경우 onload는 호출되지 않습니다.

var img1=new Image(); 
img1.onload = function() { 
    cxt1.drawImage(img1,0,0,750,400); 
}; 
img1.src="image.jpg";