canvas自适应高度

可以使用JavaScript来实现canvas自适应高度。具体步骤如下：

1. 获取canvas元素及其父元素。

2. 监听父元素的高度变化，当父元素高度发生变化时，执行相应的操作。

3. 在监听函数中，获取父元素的高度并赋值给canvas元素的高度属性，以实现canvas自适应高度。

下面是一个示例代码：

<div id="canvas-container">
  <canvas id="my-canvas"></canvas>
</div>

<script>
  const canvas = document.getElementById('my-canvas');
  const container = document.getElementById('canvas-container');

  // 监听父元素高度变化
  const observer = new MutationObserver(() => {
    canvas.height = container.clientHeight;
  });
  observer.observe(container, { attributes: true });

  // 初始化canvas高度
  canvas.height = container.clientHeight;
</script>

在上面的代码中，我们使用了MutationObserver来监听父元素的高度变化，当父元素高度发生变化时，执行回调函数中的代码，将父元素的高度赋值给canvas元素的高度属性。最后，我们还需要初始化canvas元素的高度，以保证canvas在页面首次加载时就具有正确的高度。