Question

我在所有画布图像创建文档（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

如果要将新图像绘制到画布上，则无需在图像的构造函数中指定图像大小。在myImg.onload完全加载图片后，Javascript将知道图片的原始尺寸。

使用context.drawImage在画布上绘制图像时，默认情况下，图像将以其原始大小绘制。但您也可以使用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);

如果您希望画布与图像的大小相同，则必须在myImg.onload内调整画布大小，这是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);
}

我应该指定画布新的Image（）构造函数的高度和宽度吗？

1 个答案: