canvas如何调整图片自适应窗口

大小？

canvas中的图片自适应窗口大小可以通过以下步骤实现：

1. 获取canvas以及图像的宽度和高度。

2. 获取窗口的宽度和高度。

3. 计算窗口宽度与图像宽度的比例和窗口高度与图像高度的比例，取比例较小的一个作为缩放比例。

4. 将canvas和图像的宽高乘以缩放比例，得到新的宽高。

5. 将canvas的宽高设置为新的宽高，然后绘制图像。

具体代码实现可以参考以下示例：

// 获取canvas和图像的宽度和高度
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var img = document.getElementById('myImage');
var imgWidth = img.naturalWidth;
var imgHeight = img.naturalHeight;
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;

// 获取窗口的宽度和高度
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;

// 计算缩放比例
var scaleX = windowWidth / imgWidth;
var scaleY = windowHeight / imgHeight;
var scale = Math.min(scaleX, scaleY);

// 计算新的宽度和高度
var newWidth = imgWidth * scale;
var newHeight = imgHeight * scale;

// 设置canvas的宽度和高度
canvas.width = newWidth;
canvas.height = newHeight;

// 绘制图像
ctx.drawImage(img, 0, 0, newWidth, newHeight);