2016-07-01 4 views
-2

Ich habe versucht, eine einfache JS Canvas zu schreiben, aber es würde nicht zeichnen. Wenn ich die RenderCanvas() von der Dev-Konsole in Chrome aufrufen, funktioniert es, aber nicht, wenn ich es in Code aufrufen. Irgendwelche Ideen warum? Ich bin sicher, dass das Bild gibt es ...JS Funktionsaufrufe werden nicht funktionieren

<!DOCTYPE html> 
<html> 
<head> 
    <title>JSolitaire</title> 
</head> 
<body> 
    <canvas id="canvas" width="640" height="480"></canvas> 
    <script> 
    renderCanvas(); 
    var canvas = document.getElementById("canvas"); 
    var ctx = canvas.getContext("2d"); 
    var bgReady = false; 
    var bgImage = new Image(); 
    bgImage.src = "background.png"; 
    bgImage.onload = new function(){ 
     bgReady = true; 
    }; 

    function renderCanvas(){ 
     if(bgReady) 
      ctx.drawImage(0, 0, bgImage); 
    }; 
    </script> 
</body> 
</html> 
+3

Warum das 'new' Schlüsselwort vor' function'? – trincot

+0

Sie haben renderCanvs als ersten Aufruf und Sie haben noch nicht einmal angefangen, den Hintergrund zu laden. Versuchen Sie renderCanvas in die onload-Funktion zu legen, da Sie warten müssen, bis das Bild trotzdem geladen wird. – Blindman67

Antwort

1

Es gibt keinen Grund von bgReady verwenden Sie diese nur tun können,

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 
var bgImage = new Image(); 
bgImage.src = "background.png"; 
bgImage.onload = function() { 
    renderCanvas(); 
}; 
function renderCanvas() { 
    ctx.drawImage(bgImage, 0, 0); 
}; 
+0

Das funktioniert, aber ich musste bgImage als ersten Parameter zu drawImage hinzufügen: ctx.drawImage (bgImage, 0, 0); – Airborne

+0

ja gerade überprüft die Funktion es sollte ctx.drawImage (Bild, dx, dy) sein; Danke mein Herr. – WinterCore

+0

@WinterCore. Wow, und du hast uns gesagt, dass es von der Konsole funktioniert? Wie kann das sein? – trincot