Question

我编写了以下代码并将其放在html测试器中。应该出现图像：

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

由于某种原因，它似乎不起作用。我想用图像制作游戏，我把它作为练习。如果我删除requestAnimationFrame，则会显示图像，但是当我添加移动时，我将需要它。为什么图像不出现？谢谢！

Answer 1

这部分

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';
}

根本不要这样做。每一帧都需要等待onload完成。相反，首先创建一个init函数并将其附加到您的bodys onload事件。在此函数中，使用darth vader的src填充类级别Image变量。

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

然后在你的绘制循环中就是这样。

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

Canvas实际上并不关心图像是否尚未加载，因此您并不需要将onload事件附加到它上面。

此外，虽然你还不够远，但不要画到显示画布上。绘制到隐藏的画布，然后将完成的隐藏画布绘制到显示画布。这将提供更好的性能。

Answer 2

您的图像未显示，因为您没有调用Image对象的加载方法。您只指定了特定事件发生时必须执行的操作（此处为加载）。

以下是工作代码：

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

requestAnimationFrame(draw);
}

但是，我建议你遵循其他贡献者在架构方面给出的建议。

Answer 3

您在requestAnimationFrame(draw);功能中呼叫draw，该功能每秒呼叫您的draw功能约60次。在draw功能中，您还有ctx.clearRect(0, 0, canvas.width, canvas.height);正在清除画布。因此，您的图像不会显示。我只涉及使用画布，所以我绝不是专家，但这是你代码中的问题。

Read more about requestAnimationFrame here.

为什么图像不出现？

3 个答案: