HTML5 画布等比例缩放

在HTML5画布中，等比例缩放通常意味着你需要保持元素的宽高比不变。以下是一个简单的JavaScript函数，用于在保持等比例不变的情况下，对画布上的图像进行缩放。

function scaleImage(ctx, originalWidth, originalHeight, targetWidth, targetHeight) {
    var scaleFactor, scaledWidth, scaledHeight;
 
    // 计算缩放因子
    scaleFactor = Math.min(targetWidth / originalWidth, targetHeight / originalHeight);
 
    // 计算新的宽度和高度
    scaledWidth = originalWidth * scaleFactor;
    scaledHeight = originalHeight * scaleFactor;
 
    // 绘制缩放后的图像
    ctx.drawImage(image, 0, 0, scaledWidth, scaledHeight);
}

使用此函数时，你需要传入画布的上下文（ctx），原始的宽度和高度，以及目标的宽度和高度。函数会找到最适合的缩放比例，并在画布上绘制出等比例缩放后的图像。

例如，如果你有一个画布和一个图像，你可以这样使用这个函数：

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var image = new Image();
image.onload = function() {
    scaleImage(ctx, image.width, image.height, canvas.width, canvas.height);
};
image.src = 'path/to/image.jpg';

在这个例子中，myCanvas 是你的画布的ID，path/to/image.jpg 是你想要缩放的图像的路径。函数会自动计算如何缩放图像以适应画布大小，并在画布上绘制等比例缩放后的图像。