1

私は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);

何か案は？

ありがとう

4

2 に答える 2

4

イメージをキャンバスに追加する前に、イメージが実際に読み込まれるまで待つ必要があります。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);  
};
于 2013-06-27T03:14:36.910 に答える
1

私は初心者なので編集しました（幸運なキャッシュヒット）：

    <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>
于 2013-06-27T03:02:04.737 に答える