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(). 

これは私のjavascriptですが、ブラウザでこれを実行すると、境界線のみが最初に来て、ページを更新した後に画像が表示されます。コードの問題は何ですか？

Answer 1

「負荷」ハンドラで描画をやって試してみてください。

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

Answer 2

ブラウザが十分に速い場合のでimg1.srcラインはonloadの後でなければならない（+多分画像がキャッシュされているか、それはローカルホストです） img1.srcが設定された直後にイメージがロードされます。この場合、onloadは呼び出されません。

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