Warum erscheint das Bild nicht?

Ich schrieb den folgenden Code und legte es in einen HTML-Tester. Ein Bild soll erscheinen:Warum erscheint das Bild nicht?

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>Gamedev Canvas Workshop</title> 

</head> 
<body> 

<canvas id="myCanvas" width="500" height="500"></canvas> 

<script> 
var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 
var heroRadius = 20; 
var heroX = 50; 
var heroY = 50; 
var upPressed = false; 
var downPressed = false; 
var leftPressed = false; 
var rightPressed = false; 
var heroSpeed = 2; 

document.addEventListener("keydown", keyDownHandler, false); 
document.addEventListener("keyup", keyUpHandler, false); 

function keyDownHandler(e) { 
if(e.keyCode == 87) { 
    upPressed = true; 
} 
else if(e.keyCode == 83) { 
    downPressed = true; 
} 
else if(e.keyCode == 65){ 
    leftPressed = true; 
} 
else if(e.keyCode == 68){ 
    rightPressed = true; 
} 
} 

function keyUpHandler(e) { 
if(e.keyCode == 87) { 
    upPressed = false; 
} 
else if(e.keyCode == 83) { 
    downPressed = false; 
} 
else if(e.keyCode == 65) { 
    leftPressed = false; 
} 
else if(e.keyCode = 68) { 
    rightPressed = false; 
} 
} 

function drawHero() { 
    var imageObj = new Image(); 

    imageObj.onload = function() { 
    ctx.drawImage(imageObj, 69, 100); 
    }; 
    imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; 
} 

function draw() { 
ctx.clearRect(0, 0, canvas.width, canvas.height); 
drawHero(); 

requestAnimationFrame(draw); 
} 
draw(); 
</script> 

</body> 
</html>

Es scheint aus irgendeinem Grund nicht zu funktionieren. Ich möchte ein Spiel mit einem Bild machen und ich habe dies als Übung gemacht. Das Bild erscheint, wenn ich requestAnimationFrame entferne, aber ich brauche das, wenn ich Bewegung hinzufüge. Warum erscheint das Bild nicht? Danke!

Quelle

2017-06-26 Azhi

Dieser Teil

function drawHero() { 
    var imageObj = new Image(); 

    imageObj.onload = function() { 
    ctx.drawImage(imageObj, 69, 100); 
    }; 
    imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; 
}

Tun Sie dies nicht tun. Jeder Frame muss warten, bis der Ladevorgang abgeschlossen ist. Erstellen Sie stattdessen zuerst eine init-Funktion und hängen Sie sie an Ihr bodys onload-Ereignis an. Füllen Sie in dieser Funktion eine Image-Variable auf Klassenebene mit dem Quellcode Ihres darth vader.

var imageObj = new Image(); 
function init(){ 
    imageObj.src='http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; 
}

Dann wäre dies in Ihrer Zeichnungsschleife.

function drawHero() { 
    ctx.drawImage(imageObj, 69, 100); 
}

Canvas sich nicht darum kümmern tatsächlich, dass das Bild noch nicht geladen, so dass Sie nicht wirklich ein Onload-Ereignis, um es befestigen müssen.

Auch wenn Sie noch nicht weit genug sind, zeichnen Sie nicht auf die Leinwand. Zeichnen Sie auf eine ausgeblendete Leinwand und zeichnen Sie die fertige verborgene Leinwand auf die Leinwand. Dies wird zu einer viel besseren Leistung führen.

Quelle

2017-06-26 19:22:41

Ihr Bild wird nicht angezeigt, weil Sie die Lade-Methode Ihres Image-Objekts nicht aufgerufen haben. Sie haben nur angegeben, was zu tun ist, wenn ein bestimmtes Ereignis stattfindet (hier, Laden).

Hier ist die Arbeits Stück Code:

function draw() { 
ctx.clearRect(0, 0, canvas.width, canvas.height); 
drawHero(); 
imageObj.load() 

requestAnimationFrame(draw); 
}

Allerdings empfehle ich Ihnen den Rat von den anderen Mitwirkenden in Bezug auf die Architektur zu befolgen.

Quelle

2017-06-26 19:26:00 YumHax

Sie rufen requestAnimationFrame(draw); innerhalb Ihrer draw Funktion an, die Ihre draw Funktion etwa 60 Mal pro Sekunde aufruft. In Ihrer draw Funktion haben Sie auch ctx.clearRect(0, 0, canvas.width, canvas.height);, die Ihre Zeichenfläche löscht. Daher wird Ihr Bild nicht angezeigt. Ich habe mich nur mit Leinwand beschäftigt, also bin ich kein Experte, aber das ist das Problem in Ihrem Code.

Warum erscheint das Bild nicht?

Antwort

Verwandte Themen