html5-canvas 图片缩放图像以适合或填充

缩放以适应

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

缩放以填充

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

示例缩放以适合

var image = new Image();image.src = "imgURL";image.onload = function(){scaleToFit(this);}function scaleToFit(img){// get the scalevar scale = Math.min(canvas.width / img.width, canvas.height / img.height);// get the top left position of the imagevar 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 scalevar scale = Math.max(canvas.width / img.width, canvas.height / img.height);// get the top left position of the imagevar 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);}

这两个函数之间的唯一区别是获取比例。拟合使用最小拟合比例，填充使用最大拟合比例。