javascript - 在 Canvas 上绘制之前设置以编程方式创建的图像的尺寸

Question

我在 JavaScript 中创建了一个 Image 对象，目的是将其绘制在 Canvas 上。我设置图像的宽度和高度属性，然后将其绘制在 Canvas 上。图片是按自然尺寸绘制的，不是我设置的尺寸。

// 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);

下面是两个方法的 JSFiddle 演示，以更好地说明我所描述的内容:http://jsfiddle.net/do3gg1cy/ .

对于我的用例，我希望能够调整 Image 对象本身的大小并在 Canvas 上以该大小绘制它(即第一种方法)，而不必在 drawImage 期间设置尺寸 操作。

我是否错误地设置了宽度和高度属性，或者有人知道另一种解决方法吗？

Answer 1

根据standard ，如果省略“dw”和“dh”，drawImage 方法会根据 intrinsic 宽度和高度在 < strong>图像像素。修改 width 和 height 属性不会改变这些内在值。