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>

在html5画布上绘制图像

2 个答案: