Изображение не отображается на холсте onload

Question

Я пытаюсь заставить изображение игрока перемещаться по холсту. Изображение игрока не отображается при загрузке. Я использовал предупреждение, чтобы проверить onload, и он работает, но изображение не отображается.

Изображение игрока не отображается, если я только перемещаюсь влево и вправо, и он не отображается, если я только перемещаюсь вверх и вниз. Изображение появляется после того, как я переместился как по направлениям X, так и по Y, что заставляет меня думать, что X и Y настроены неправильно, пока моя анимационная функция не установит их. Я не могу понять, что не так с начальной загрузкой X и Y, хотя я использую свои собственные изображения на своем компьютере, но я просто подключил некоторые случайные снимки, чтобы вы, ребята, могли что-то увидеть.

Я просто поместил весь код здесь. Я не знаю, слишком ли это, но я не уверен, что я сделал не так. Я очень новичок в этом, и сейчас я впервые задаю вопрос. Буду признателен, если кто-нибудь скажет мне, что я делаю неправильно.

редактировать: Я изменил

var destX = xToCenter; 
var destY = yToCenter; 

на только реальные цифры

var destX = 260; 
var destY = 220; 

и что работает, но я не понимаю, почему. Может кто-то объяснить, почему я не могу использовать xToCenter и yToCenter для onload, но он работает во время движения?

here is my jsfiddle

//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; 
 

 
}

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

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

Answer 1

Я все еще учусь, но я думаю, что могу ответить на мой собственный вопрос. Когда я создаю переменную, я должен дать ей начальное значение, прежде чем установить его равной другой переменной.