如何根据窗口的宽/高来调整<canvas>的大小并保持宽高比？_如何保持图片比例，并根据图片的实际大小调整图片大小？_如何将用window.open创建的窗口大小调整为监视器的全宽并限制高度 - 腾讯云开发者社区

如何根据窗口的宽/高来调整<canvas>的大小并保持宽高比？

根据窗口的宽/高来调整<canvas>的大小并保持宽高比，可以通过以下步骤实现：

首先，获取窗口的宽度和高度。可以使用JavaScript的window.innerWidth和window.innerHeight属性来获取窗口的宽度和高度。
接下来，计算<canvas>的宽度和高度。假设<canvas>的宽高比为aspectRatio，可以使用以下公式计算宽度和高度：
- 如果窗口的宽度小于高度，则<canvas>的宽度等于窗口的宽度，高度等于窗口的宽度除以宽高比。
- 如果窗口的宽度大于等于高度，则<canvas>的宽度等于窗口的高度乘以宽高比，高度等于窗口的高度。

最后，将计算得到的宽度和高度应用到<canvas>元素上。可以使用JavaScript的setAttribute方法来设置<canvas>的宽度和高度属性。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>调整<canvas>大小并保持宽高比</title>
</head>
<body>
  <canvas id="myCanvas"></canvas>

  <script>
    function resizeCanvas() {
      var canvas = document.getElementById('myCanvas');
      var aspectRatio = 16 / 9; // 假设宽高比为16:9

      var windowWidth = window.innerWidth;
      var windowHeight = window.innerHeight;

      var canvasWidth, canvasHeight;

      if (windowWidth < windowHeight) {
        canvasWidth = windowWidth;
        canvasHeight = windowWidth / aspectRatio;
      } else {
        canvasWidth = windowHeight * aspectRatio;
        canvasHeight = windowHeight;
      }

      canvas.setAttribute('width', canvasWidth);
      canvas.setAttribute('height', canvasHeight);
    }

    // 在窗口大小改变时调用resizeCanvas函数
    window.addEventListener('resize', resizeCanvas);

    // 页面加载完成后立即调用resizeCanvas函数
    window.addEventListener('load', resizeCanvas);
  </script>
</body>
</html>

这样，<canvas>元素的大小将根据窗口的宽/高进行调整，并保持宽高比为16:9。你可以根据实际需求修改aspectRatio的值来适应不同的宽高比。

腾讯云相关产品和产品介绍链接地址：