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