縮放影象以適合或填充

縮放以適應

意味著整個影象將是可見的，但如果影象與畫布不同，則可能在側面或頂部和底部有一些空的空間。該示例顯示縮放以適合的影象。兩側的藍色是由於影象與畫布不同的事實。

縮放填充

表示縮放影象，以便影象覆蓋所有畫布畫素。如果影象方面與畫布不同，則影象的某些部分將被剪裁。該示例顯示縮放以填充的影象。請注意影象的頂部和底部是如何不再可見的。

示例縮放以適合

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

這兩個函式之間唯一的區別就在於獲得規模。擬合使用最小擬合比例將填充使用最大擬合比例。