帶有紋理的JavaScript對象

嗨我正在研究一個小小的JavaScript遊戲，我寫了一個Object構造函數來創建遊戲的SpaceCraft對象。
的構造器的代碼是帶有紋理的JavaScript對象

function SpaceCraft() { 

var obj = this; 

this.texture = new Image(); 
this.texture.src = "img/spacecraft.png"; 
this.texture.onload = function() { 
    obj.w = this.width; 
    obj.h = this.height; 
} 

this.x = canvasW/2 - this.w/2; 
this.y = canvasH/2 - this.h; 

//Methods 

//Draw 
this.draw = function() { 
    ctx.drawImage(this.texture, this.x, this.y); 
} 
}

在構造有兩個問題：

的this.w和this.h等於0雖然圖像具有不尺寸的爲0x0
this.x和this.y等於NaN時，但它們應爲數字

var canvas; 
var ctx; 
var canvasH; 
var canvasW; 


window.onload = function() { 
canvas = document.getElementById("canvas"); 
ctx  = canvas.getContext('2d'); 

canvasH = 480; 
canvasW = 960; 

canvas.width = canvasW; 
canvas.height = canvasH; 

drawCanvas(); 
}

這是平局畫布功能

function drawCanvas() { 

ctx.fillStyle = "#000000" 
ctx.fillRect(0, 0, canvasW, canvasH); 
}

什麼是構造函數的問題？
謝謝。

來源

2014-03-27 L99

你從哪裏得到'canvasW'和'canvasH'？ – Andy

在加載之前，圖像*不會*「具有」尺寸，這是*異步*操作。 – user2864740

圖像需要在尺寸已知之前加載，只需定義其src是不夠的。 'this.x'和'this.y'可能是'NaN'，因爲它們是字符串值（例如'400px/2 = NaN'），但如果不瞭解canvasW和canvasH值，很難說。 – Ennui

該圖像尚未加載。這就是爲什麼你得到寬度和高度。使用onload事件處理程序來設置這些參數。

我不能說爲什麼this.x和this.y是NaN，但它是最有可能canvasW和canvasH沒有正確定義。請考慮使用ctx.canvas.width和ctx.canvas.height。

來源

2014-03-27 17:28:34

我該怎麼做？你能給我寫代碼嗎？ – L99

嗯，我發現這個話題：http://stackoverflow.com/questions/4123906/javascript-image-onload-callback-to-object-function – L99

我認爲這是我的同樣的問題 – L99

帶有紋理的JavaScript對象

回答

相關問題