JS Bild nicht auf Leinwand

Ich habe ein Vogel = {} -Objekt, wo ich eine Zeichenfunktion definieren, aber das Bild erscheint nicht, wenn in der Render-Funktion aufgerufen. Könnte mich jemand auf das hinweisen, was ich falsch mache? Danke im Voraus.JS Bild nicht auf Leinwand

EDIT: Ich habe bemerkt, der Grund, warum es nicht immer angezeigt wird, ist, weil es andere Sprites auf dem Bildschirm gibt, und wenn ich sie ausschalte, erscheint der Vogel immer. Gibt es etwas, das das beheben kann?

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(); 
 

 
}

Quelle

2017-02-15 UpARiver

main() aufgerufen wird nie? 'states' existiert nicht und das Asset existiert nur auf Ihrem lokalen Computer (Sie müssen es hochladen). Berücksichtigen Sie auch die Verwendung von Variablen zum Speichern von Werten. – K3N

Ich habe es hier nicht geschrieben, aber es ist auf den ursprünglichen Code. Über die ursprüngliche Frage, hättest du irgendwas vorschlagen können? – UpARiver

Sie könnten das Vogelbild hochladen (verwenden Sie den Bild-Upload-Button im Editor) und verknüpfen stattdessen Ihren img src damit, damit wir prüfen können, ob der Vogel außerhalb des Canvas-Bereichs gezeichnet wurde oder nicht. Bereinige auch das Beispiel, das in der Frage enthalten ist, so dass es lauffähig ist (ohne "Zustände" oder zumindest mit definierten Zuständen zu verwenden, main() usw. anrufend). – K3N

Auf Anregung des @ K3N hier ist ein funktionierendes Beispiel. Danke @ K3N für die Anleitung.

Mit diesen Änderungen Ihr Code wie folgt aussehen würde:

<!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

hoffe, das hilft, Nick Leoutsakos

Quelle

2017-02-15 21:58:02

"Hinweis: Werte müssen positiv sein und sollten nur numerische Werte enthalten". Es ist kein Problem, ein Bild mit negativen Werten zu zeichnen (zB Transformationen; Leinwand wird unabhängig davon abgeschnitten). Sie können versuchen, negative Werte in das verknüpfte jsbin einzufügen, das Sie erstellt haben, und Sie werden sehen, dass es keine Probleme gibt. – K3N

Danke @ K3N. Du hast definitiv Recht damit. Bearbeitet, um das zu reflektieren. –

Leider immer noch nicht ganz korrekt, da Sie einen Ausdruck als Argument auswerten dürfen, dh. height - 200 wird zu einer Zahl ausgewertet, da die Höhe bereits eingestellt ist. Es gibt viele Probleme in OP-Code, aber der Aufruf von drawImage() ist nicht einer von ihnen (es sei denn, die Berechnung ist so, dass der Vogel außerhalb der sichtbaren Leinwand gezeichnet wird - er zeigt uns nicht, so dass wir nicht wissen, welche Vermögenswerte/Vogel. PNG sieht aus wie). – K3N

JS Bild nicht auf Leinwand

Antwort

Verwandte Themen