在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>