在html5畫布上繪製圖像

Question

我對js很陌生，只做了一點html，但是這看起來像是一件很簡單的事情：我只是試圖在畫布上繪製圖像！如果將新圖像添加到我的主div（gameObjectElement），它可以正常工作，但是當試圖在畫布上繪製它時，它不會顯示。填充文本顯示在畫布上，所以我相信上下文是正確的。

 var marthPic = new Image(); 
     marthPic.src ='images/marth.jpg'; 

     $(gameObjectElement).append(marthPic); 

     var c=document.getElementById("myCanvas"); 
     var ctx=c.getContext("2d"); 
     ctx.font="30px Arial"; 
     ctx.fillText("Hello World",300,50); 
     ctx.drawImage(marthPic, 100, 100); 

任何想法？

感謝

Answer 1

你需要等待圖像將其添加到畫布前實際加載。您可以使用onload處理程序執行此操作：

var marthPic = new Image(); 
marthPic.src ='images/marth.jpg'; 
$(gameObjectElement).append(marthPic); 

marthPic.onload = function() { 
    var c=document.getElementById("myCanvas"); 
    var ctx=c.getContext("2d"); 
    ctx.font="30px Arial"; 
    ctx.fillText("Hello World",300,50); 
    ctx.drawImage(marthPic, 100, 100); 
}; 

Answer 2

編輯，因爲我是小白（幸運的緩存命中）：

<script> 
    var c=document.getElementById("myCanvas"); 
    var ctx=c.getContext("2d"); 

    var marthPic = new Image(); 
    marthPic.src = 'images/marth.jpg'; 
    marthPic.onload = function() { 
     ctx.drawImage(marthPic,10,10); 
    }; 

</script>