为什么我不能为Image对象设置宽度和高度？

Question

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的盒子。

另外，我注意到我需要在画布上为drawImage设置一个setTimeout函数。没有延迟，图像不会出现。你能解释一下为什么会这样吗？

Answer 1

在drawImage

中传递宽度和高度

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