爲什麼我無法設置我的Image對象的寬度和高度？

var canvas = document.getElementById("canvas"); 
var surface = canvas.getContext("2d"); 

//creating tile 
var box = {}; 
box.x = 0; 
box.y = 0; 
box.img = new Image(); 
box.img.src = "box_image.png"; 
box.img.height = "64"; 
box.img.width = "64"; 

console.log(box.img.width); 
//set delay to draw boxes 
setTimeout(drawBoxes, 10); 

//drawing tile 
function drawBoxes() { 
    surface.drawImage(box.img, box.x, box.y); 

}

我想知道爲什麼即使改變圖像對象的寬度和高度，圖像的尺寸似乎也沒有改變。該圖像是一個400x400的PNG，但我想把它變成一個64x64的盒子。爲什麼我無法設置我的Image對象的寬度和高度？

另外，我注意到我需要在畫布上放置drawImage的setTimeout函數。沒有延遲，圖像不會出現。你能解釋爲什麼會發生？

來源

2016-11-16 PixelProgrammer

您沒有使用寬度/高度值的任何地方。看看其他重載的drawImage方法。 – 11thdimension

@ 11thdimension是唯一的方法嗎？我似乎記得我的教授分別設置寬度和高度。 – PixelProgrammer

'設置延遲繪製盒子' - 使用'box.img.addEventListener（'load'，drawBoxes）'而不是這個命中並且錯過10毫秒超時 –

傳遞的寬度和高度在drawImage

surface.drawImage(box.img, box.x, box.y, box.img.width, box.img.height);

來源

2016-11-16 05:26:30 sam

爲什麼我無法設置我的Image對象的寬度和高度？

回答

相關問題