Question

我试图让玩家形象在画布上移动。玩家图像在加载时不会显示。我使用警报检查onload，它似乎正在运行，但图像不显示。

如果我只向左和向右移动，则不会显示播放器图像，如果我只是上下移动，则不会显示。我在X和Y方向上移动后，图像确实显示出来，这让我觉得X和Y没有正确设置，直到我的动画功能设置它们。虽然我在计算机上使用自己的图像但是我只是插入了一些随机图片，所以你们可以看到一些负载，我无法看到初始X和Y上载有什么问题。

我只是把整个代码放在这里我不知道这是不是太多但是我不确定我做错了什么。我是非常新的，这是我第一次在这里发帖提问。如果有人告诉我我做错了什么，我将不胜感激。

编辑：我改变了

var destX = xToCenter;
var destY = yToCenter;

只是实际数字

var destX = 260;
var destY = 220;

这有效，但我不明白为什么。有人可以解释为什么我不能使用xToCenter和yToCenter进行上传，但它在移动功能期间有效吗？

here is my jsfiddle

＆＃13;

//create canvas
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
canvas.width = 600;
canvas.height = 600;

//create background canvas
var worldCanvas = document.getElementById("worldCanvas");
var wctx = worldCanvas.getContext('2d');
worldCanvas.width = 600;
worldCanvas.height = 600;

//player image
var avatar = new Image();
var sourceX = 32;
var sourceY = 32;
var sourceWidth = 16;
var sourceHeight = 32;
var destWidth = sourceWidth * 5;
var destHeight = sourceHeight * 5;
var destX = xToCenter;
var destY = yToCenter;
var speed = 4;
var faceRight = 0;
var faceLeft = 1;
var faceDown = 2;
var faceUp = 3;
var animation = [0, 32, 64];
var i = 0;

//background image
var worldMap = new Image();
var sMapX = 0;
var sMapY = 0;
var sMapWidth = canvas.width;
var sMapHeight = canvas.height;
var dMapX = 0;
var dMapY = 0;
var dMapWidth = canvas.width;
var dMapHeight = canvas.height;

var worldWidth = 1280;
var worldHeight = 873;

//center player
var xToCenter = (0.5 * dMapWidth - 0.5 * destWidth);
var yToCenter = (0.5 * dMapHeight - 0.5 * destHeight);

//load and draw background
worldMap.src = "http://img06.deviantart.net/75db/i/2013/332/5/2/random_background_by_electriczerox-d6vyp1u.png";
worldMap.onload = function() {
  wctx.drawImage(worldMap, sMapX, sMapY, sMapWidth, sMapHeight, dMapX, dMapY, dMapWidth, dMapHeight);
  alert("worldMap loaded");
}

//load and draw avatar
avatar.src = "http://www.somerandomfacts.com/wp-content/uploads/2013/11/jpg1";
avatar.onload = function() {
  ctx.drawImage(avatar, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
  alert("avatar loaded");
}

//clear and redraw 
;
(function() {
  function main() {
    window.requestAnimationFrame(main);
    wctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    wctx.drawImage(worldMap, sMapX, sMapY, sMapWidth, sMapHeight, dMapX, dMapY, dMapWidth, dMapHeight);
    ctx.drawImage(avatar, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
  }
  main();
})();

//move avatar
window.addEventListener('keydown', function(event) {
  var keyPressed = event.keyCode;
  switch (keyPressed) {
    //a moves left
    case 65:
      if (sMapX > 0) sMapX -= speed;
      destX = xToCenter;
      sourceX = faceLeft * sourceWidth;
      animationLoop();
      sourceY = animation[i];
      break;
      //w moves up
    case 87:
      if (sMapY > 0) sMapY -= speed;
      destY = yToCenter;
      sourceX = faceUp * sourceWidth;
      animationLoop();
      sourceY = animation[i];
      break;
      //d moves right
    case 68:
      if (sMapX < worldWidth - dMapWidth) sMapX += speed;
      destX = xToCenter;
      sourceX = faceRight * sourceWidth;
      animationLoop();
      sourceY = animation[i];
      break;
      //s moves down
    case 83:
      if (sMapY < worldHeight - dMapHeight) sMapY += speed;
      destY = yToCenter;
      sourceX = faceDown * sourceWidth;
      animationLoop();
      sourceY = animation[i];
      break;
  }
});

//animate while moving
function animationLoop() {
  window.requestAnimationFrame(changeI);
}

function changeI() {
  if (i <= animation.length) i += 1;
  animation[i];
  if (i == animation.length) i = 0;

}

＆＃13;

.canvas {
  border: 1px solid;
  position: fixed;
  top: 0;
  left: 0;
}
.worldCanvas {
  border: 1px solid;
  z-index: -1;
  position: fixed;
  top: 0;
  left: 0;
}

＆＃13;

<canvas class="canvas" id="canvas"></canvas>
<canvas class="worldCanvas" id="worldCanvas"></canvas>

＆＃13;

Answer 1

我还在学习，但我想我可以回答我自己的问题。当我创建一个变量时，我应该在它设置它等于另一个变量之前给它一个初始值。

图片未显示在画布onload

1 个答案: