canvas 画布缩放自适应

在使用 canvas 绘图时，我们可以通过控制画布的大小来实现画布缩放的效果。但是，如果我们希望画布能够自适应浏览器窗口大小的变化，就需要使用 JavaScript 来动态修改画布的大小。

下面是一种简单的实现方式：

获取 canvas 元素和其父容器元素。

var canvas = document.getElementById('myCanvas');
var container = document.getElementById('canvasContainer');

定义一个函数，用于动态修改画布的大小。

function resizeCanvas() {
  canvas.width = container.clientWidth;
  canvas.height = container.clientHeight;
}

在窗口大小发生变化时，调用 resizeCanvas 函数。

window.addEventListener('resize', resizeCanvas, false);

完整代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Canvas 自适应缩放</title>
  <style>
    #canvasContainer {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div id="canvasContainer">
    <canvas id="myCanvas"></canvas>
  </div>

  <script>
    var canvas = document.getElementById('myCanvas');
    var container = document.getElementById('canvasContainer');

    function resizeCanvas() {
      canvas.width = container.clientWidth;
      canvas.height = container.clientHeight;
    }

    window.addEventListener('resize', resizeCanvas, false);

    resizeCanvas(); // 初始化画布大小
  </script>
</body>
</html>

在上面的代码中，我们在 CSS 中将父容器元素 #canvasContainer 的宽度和高度设置为 100%，这样它就会占满整个浏览器窗口。同时，我们还将其 overflow 属性设置为 hidden，以避免画布大小超出容器的范围。

在 JavaScript 中，我们获取了 canvas 元素和其父容器元素，并定义了一个 resizeCanvas 函数，用于动态修改画布的大小。具体来说，我们在函数中通过 clientWidth 和 clientHeight 属性获取父容器的宽度和高度，并将其赋值给 canvas 的 width 和 height 属性。

最后，我们在窗口大小发生变化时，调用 resizeCanvas 函数，并在页面加载完成后立即调用一次，以确保画布的大小正确初始化