Javascript 在画布上绘制以编程方式创建的图像之前设置图像的尺寸

我用JavaScript创建了一个图像对象，以便在画布上绘制它。我设置图像的宽度和高度属性，然后在画布上绘制。图像是按自然尺寸绘制的，而不是我设置的尺寸

// Assume image is a loaded image object, and ctx is a canvas' 2D context.

image.width=image.width/2;
image.height=image.height/2;
ctx.drawImage(image,0,0); // Draws the image at its original dimensions, not half-size.

我所知道的以不同大小绘制图像的唯一方法是将宽度和高度明确设置为

drawImage

函数的一部分，如下所示：

ctx.drawImage(image,0,0,image.width/2,image.height/2);

下面是两种方法的JSFIDLE演示，以更好地说明我所描述的内容：

对于我的用例，我希望能够调整图像对象本身的大小，并在画布上以该大小绘制它（即第一种方法），而不必在

drawImage

操作期间设置尺寸

---

是我设置的宽度和高度属性不正确，还是有人知道其他解决方法？

根据，如果省略了“dw”和“dh”，则

drawImage

方法根据图像的内在图像像素中的宽度和高度来建立源图像尺寸。修改

宽度

和

高度

属性不会更改这些固有值。

您可以将那些dw和dh设置添加到image.width和image.height中，以解决以下问题：issue@Amit谢谢你的回答，这几乎澄清了我的问题@Kaido你是对的，如果我设置了图像的

宽度

和

高度

属性，然后调用

ctx.drawImage（图像，0,0，图像.宽度，图像.高度）

，这有效地实现了我所寻找的。@kaido-在小提琴中演示了OP，但没有work@Kaiido是 啊如果重用

drawImage

调用中的值，则会发生这种情况，但您可以将任何变量、计算或静态值放入其中，以获得相同的结果。使用图像对象宽度和高度属性这一事实并不是解决方案的一部分。当然，您可以将这些属性更改为任何值，然后在调用

drawImage

时重新使用它，我不明白您的观点。。。