为什么我无法设置我的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对象的宽度和高度？

回答

相关问题