this.image.width/number yield 0

Question

我想要使用圖像寬度來計算一個精靈的寬度，但是這個數字總是爲0，爲什麼？

function SpriteSheet(image, numFramesX, numFramesY, totalFrames) { 
    this.image = image; 
    this.numFramesX = numFramesX; 
    this.numFramesY = numFramesY; 
    this.totalFrames = totalFrames; 

    this.spriteWidth = this.image.width/this.numFramesX; 
    this.spriteHeight = this.image.height/this.numFramesY; 
} 

image.onload = function() { 
console.log('Image has been loaded'); 
} 
image.src = 'dance.png'; 
spritesheet = new SpriteSheet(image, 8, 10, 80); 

spritesheet.spriteWidth和spritesheet.spriteHeight總是產生0。我壟斷了問題「this.image.width」，因爲它的工作原理，如果我把在圖像的寬度手動。

this.spriteWidth = 880/this.numFramesX; 

，而不是

this.spriteWidth = this.image.width/this.numFramesX; 

，如果我使用控制檯對象計算的話它也可以工作：

spritesheet.image.width/spritesheet.numFramesX 

產生110

jsfiddle

Answer 1

如何一回合呢？

window.onload = function() { 
    console.log('Image has been loaded'); 
    image.src = 'dance.png'; 
    spritesheet = new SpriteSheet(image, 8, 10, 80); 
}