按比例调整图像大小以适合HTML5画布

在HTML5中，可以使用canvas元素来绘制图像。Canvas元素有一个width和height属性，分别指定画布的宽度和高度。如果需要按比例缩放图像以适应HTML5画布的大小，可以使用以下步骤：

1. 获取画布的宽度和高度。const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const width = canvas.offsetWidth; const height = canvas.offsetHeight;const image = new Image(); image.src = 'path/to/image.jpg';const imageWidth = image.width; const imageHeight = image.height; const scale = Math.min(width / imageWidth, height / imageHeight); const imageScaledWidth = imageWidth * scale; const imageScaledHeight = imageHeight * scale;ctx.drawImage(image, 0, 0, imageScaledWidth, imageScaledHeight);完整代码如下：const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const width = canvas.offsetWidth; const height = canvas.offsetHeight; const image = new Image(); image.src = 'path/to/image.jpg'; const imageWidth = image.width; const imageHeight = image.height; const scale = Math.min(width / imageWidth, height / imageHeight); const imageScaledWidth = imageWidth * scale; const imageScaledHeight = imageHeight * scale; ctx.drawImage(image, 0, 0, imageScaledWidth, imageScaledHeight);这段代码将获取画布的宽度和高度，计算出图像的宽度和高度，然后绘制图像到画布上。如果需要适应不同的画布大小，只需要修改代码中的宽度和高度即可。
2. 获取要绘制的图像。
3. 计算图像的宽度和高度。
4. 绘制图像。