缩放图像以适合或填充

缩放以适应

意味着整个图像将是可见的，但如果图像与画布不同，则可能在侧面或顶部和底部有一些空的空间。该示例显示缩放以适合的图像。两侧的蓝色是由于图像与画布不同的事实。

缩放填充

表示缩放图像，以便图像覆盖所有画布像素。如果图像方面与画布不同，则图像的某些部分将被剪裁。该示例显示缩放以填充的图像。请注意图像的顶部和底部是如何不再可见的。

示例缩放以适合

var image = new Image();
image.src = "imgURL";
image.onload = function(){
    scaleToFit(this);
}

function scaleToFit(img){
    // get the scale
    var scale = Math.min(canvas.width / img.width, canvas.height / img.height);
    // get the top left position of the image
    var x = (canvas.width / 2) - (img.width / 2) * scale;
    var y = (canvas.height / 2) - (img.height / 2) * scale;
    ctx.drawImage(img, x, y, img.width * scale, img.height * scale);
}

示例缩放以填充

var image = new Image();
image.src = "imgURL";
image.onload = function(){
    scaleToFill(this);
}

function scaleToFill(img){
    // get the scale
    var scale = Math.max(canvas.width / img.width, canvas.height / img.height);
    // get the top left position of the image
    var x = (canvas.width / 2) - (img.width / 2) * scale;
    var y = (canvas.height / 2) - (img.height / 2) * scale;
    ctx.drawImage(img, x, y, img.width * scale, img.height * scale);
}

这两个函数之间唯一的区别就在于获得规模。拟合使用最小拟合比例将填充使用最大拟合比例。