JS画像がキャンバスに表示されない

私は描画関数を定義するbird = {}オブジェクトを持っていますが、レンダリング関数で呼び出されたときに画像は表示されません。誰かが間違っていることを私に指摘できますか？前もって感謝します。JS画像がキャンバスに表示されない

編集：画面上に他のスプライトがあり、それらをオフにすると、常に鳥が表示されるため、常に表示されない理由がわかりました。これを解決できるものはありますか？ここK3Nの提案@続き

bird = { 
 
    draw:function() { 
 
     var birdimg = new Image(); 
 
     birdimg.onload = function() { 
 
      ctx.drawImage(birdimg, -20, height - 200); 
 
     } 
 
     birdimg.src = "//i.stack.imgur.com/nsZLM.png"; //"assets/bird.png"; 
 
    } 
 
}; 
 

 
function main() { 
 
    canvas = document.createElement("canvas"); 
 
    //Set the width and height to the sizes of the browser 
 
    width = window.innerWidth; 
 
    height = window.innerHeight; 
 

 
    //Frames the game if the width is larger than 500 
 
    if(width >=500){ 
 
     width = 320; 
 
     height = 480; 
 
     canvas.style.border = "1px solid #000"; 
 
     evt = "mousedown"; 
 
    } 
 

 
    //Sets the canvas sizes to the width and height variables 
 
    canvas.width = width; 
 
    canvas.height = height; 
 
    ctx = canvas.getContext("2d"); 
 

 
    //Set the default state 
 
    currentstate = states.Splash; 
 

 
    document.body.appendChild(canvas); 
 

 
    render(); 
 
} 
 

 
function render(){ 
 
    //Adding bird 
 
     bird.draw(); 
 

 

 
     //Loads sky.png 
 
     bgimg = new Image(); 
 
     bgimg.onload = function() { 
 

 
      ctx.drawImage(bgimg,-20,height-200); 
 
      ctx.drawImage(bgimg,256,height-200); 
 

 
     } 
 

 
     bgimg.src = "assets/sky.png"; 
 

 
     //Loads land img 
 
     landimg = new Image(); 
 
     landimg.onload = function() { 
 

 
      ctx.drawImage(landimg,0,height-100); 
 

 

 

 
     } 
 

 
     landimg.src = "assets/land.png"; 
 

 
     //Creates rectangle that colors background. THIS IS THE BOTTOM LAYER. WRITE CODE ABOVE 
 

 
     ctx.fillStyle="#4ec0ca"; 
 
     ctx.fillRect(0,0,canvas.width,canvas.height); 
 

 
     ctx.stroke(); 
 

 
}

出典

2017-02-15 UpARiver

メインに役立ちます）が呼び出されることはありませんか？ '状態'は存在せず、資産はローカルコンピュータにのみ存在します（アップロードする必要があります）。変数を使用して値を格納することも検討してください。 – K3N

私はここに書きませんでしたが、元のコードにあります。元の質問については、親切に提案するものはありますか？ – UpARiver

鳥の画像をアップロードすることができます（エディタで画像のアップロードボタンを使用してください）。代わりにimg srcをリンクすることで、鳥がキャンバスの範囲外に描画されているかどうかを確認できます。また、質問に含まれる例を省略して、実行可能（ 'states'を使わずに、あるいは少なくとも定義された状態、main（）などを呼び出す）。 – K3N

実施例です。ガイダンスのために@ K3Nに感謝します。

これらの変更により、あなたのコードは次のようになります。

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
</head> 
<body> 
    <script> 
    // declare vars so they are available outside of main() 
    var canvas, 
     ctx, 
     width, 
     height; 

    var bird = { 
     draw: function() { 
      var birdimg = new Image(); 
      birdimg.src ="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg"; 

      birdimg.onload = function() { 
       ctx.drawImage(birdimg, -20, height - 200); 
      }; 
     } 
    }; 

    function main(){ 
     canvas = document.createElement("canvas"); 

     //Set the width and height to the sizes of the browser 
     width = window.innerWidth; 
     height = window.innerHeight; 

     //Frames the game if the width is larger than 500 
     if(width >=500){ 
     width = 320; 
     height = 480; 
     canvas.style.border = "1px solid #000"; 

     var evt = "mousedown"; 
     } 



     //Sets the canvas sizes to the width and height variables 
     canvas.width = width; 
     canvas.height = height; 
     ctx = canvas.getContext("2d"); 

     //Set the default state 
     // "states" is not defined so I'm commenting this out 
     // var currentstate = states.Splash; 

     document.body.appendChild(canvas); 

     render(); 
    } 

    main(); 

    function render(){ 
     //Adding bird 
     bird.draw(); 
    } 
    </script> 
</body> 
</html>

Live Demo

希望、これは（、ニックLeoutsakos

出典

2017-02-15 21:58:02

"ヒント：値は正で、数値のみを含める必要があります"。負の値を使用して画像を描画するときに問題はありません（つまり、キャンバスは関係なくクリップします）。リンクされたjsbinに負の値を挿入すると問題はありません。 – K3N

ありがとう@ K3N。あなたは間違いなくそれについて正しいです。それを反映するように編集されました。 –

残念ながら、式を引数として評価することが許可されているため、まだ完全には正しくありません。高さが既に設定されているので、height - 200は数値に評価されます。 OPコードでは多くの問題がありますが、drawImage（）の呼び出しはその1つではありません（表示されているキャンバスの外に鳥が描かれるようなものでなければ、私たちには表示されません。 PNGのように見える）。 – K3N

JS画像がキャンバスに表示されない

答えて

関連する問題