我应该为 canvas new Image() 构造函数指定高度和宽度吗？

Question

我在所有 canvas 图像创建文档 (https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images) 中看到新的图像构造函数，例如myImg = new Image();, 没有参数就这样使用。但是，我知道它需要宽度和高度的可选参数，例如myImg = new Image(400,300);。

如果您事先知道图像的宽度和高度，那么指定这些参数是否是一种好习惯？

在构造函数之后我使用 myImg.src = 'myurl.jpg'; 和 myImg.onload = function() { ctx.drawImage(myImg, x, y)...};

Answer 1

如果要将新图像绘制到 canvas，则无需在图像的构造函数中指定图像大小。 Javascript 会在 myImg.onload.

中完全加载图片后知道图片的原始大小

当您使用 context.drawImage 在 canvas 上绘制图像时，默认情况下图像将以其原始大小绘制。但是您也可以使用 drawImage:

的额外参数指定不同的图像大小

// draw myImg on the canvas in the top-left corner
// and resize the image to half-size
context.drawImage(myImg, 0,0, myImg.width/2, myImg.height/2);

如果您希望 canvas 与您的图像大小相同，您必须在 myImg.onload 中调整 canvas 的大小，这是 javascript 第一次知道图片的原始尺寸：

// create the canvas element its context
var canvas=document.createElement('canvas');
var context=canvas.getContext('2d');

// create the image object
var img=new Image();
img.onload=start;
img.src="myImage.png";
function start(){

    // The native image size is now known,
    // so resize the canvas to the same size as the image
    canvas.width=img.width;
    canvas.height=img.height;

    // draw the image on the canvas
    context.drawImage(img,0,0);
}

我应该为 canvas new Image() 构造函数指定高度和宽度吗？

Should I specify height and width to canvas new Image() constructor?

html

canvas

image

html5-canvas