將圖像繪製到畫布proplem

Question

其非常困惑我正在設計一個2D遊戲，我使用此代碼繪製圖像以畫布警告方法返回background.x = 0！但是當我將x更改爲z或任何字母時，它將返回400我！爲什麼background.x總是等於零？

var canvas = document.getElementById('game'); 
var context = canvas.getContext('2d'); 

function loadResources(){ 
background = new Image(); 
background.src = "11.jpg"; 
background.width = 128; 
background.height = 128; 
background.x = 400; 
background.y = 450; 

} 

function drawimage(){ 
alert(background.x); 
context.drawImage(background,background.x,background.y,background.width,background.height); 

} 

function gameLoop() { 
drawimage(); 
} 


loadResources(); 
setInterval(gameLoop, 1000/60); 

Answer 1

與其他對象不同，您實際上無法設置不屬於它的Image對象的屬性。正如您所看到的，當您在設置它們後嘗試訪問它們時，這些屬性將不可用。您可以稍微修改代碼以獲得您要查找的行爲：

var canvas = document.getElementById('game'); 
var context = canvas.getContext('2d'); 
var resources = {}; 

function loadResources(){ 
    resources.background = new Image(); 
    resources.background.src = "11.jpg"; 
    resources.background.width = 128; 
    resources.background.height = 128; 
    resources.backgroundx = 400; 
    resources.backgroundy = 450; 
} 

function drawimage(){ 
    console.log(resources.backgroundx); 
    context.drawImage(resources.background,resources.backgroundx,resources.backgroundy,resources.background.width,resources.background.height); 
} 

function gameLoop() { 
    drawimage(); 
} 


loadResources(); 
setInterval(gameLoop, 1000/60);