JS圖像未顯示在畫布上

我有一個bird = {}對象，我在其中定義繪圖函數，但在渲染函數中調用時不會顯示圖像。任何人都可以指出我做錯了什麼？提前致謝。JS圖像未顯示在畫布上

編輯：我已經注意到它並不總是出現的原因是因爲屏幕上還有其他精靈，當我將它們關閉時，鳥總是出現。有什麼可以解決這個問題嗎？

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

的main（）不會被調用？「狀態」不存在，資產只存在於本地計算機上（您需要上傳）。還要考慮使用變量來存儲值。 – K3N

我沒有寫在這裏，但它是在原來的代碼。關於原來的問題，你有什麼好意思的建議嗎？ – UpARiver

您可以上傳鳥圖像（使用編輯器中的圖片上傳按鈕），並將img src鏈接到該圖片上，以便我們檢查鳥是否繪製在畫布區域之外。同時還要減少包含在問題中的例子，以便它可以運行（不使用'states'，或者至少使用定義的狀態，調用main（）等）。 – K3N

繼這裏@ 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。你絕對是對的。編輯以反映這一點。 –

不幸的是，仍然不完全正確，因爲您可以將表達式評估爲參數，即。由於已經設置了高度，所以高度 - 200被評估爲一個數字。在OP代碼中有很多問題，但是調用drawImage（）不是其中之一（除非計算結果是這樣的，即鳥被繪製在可見畫布之外 - 他沒有向我們展示，所以我們不知道什麼是資產/鳥。 PNG看起來像）。 – K3N

JS圖像未顯示在畫布上

回答

相關問題