Canvas 自适应父盒子宽高：HTML、CSS 和 JavaScript 实现

#parent {
  width: 500px;
  height: 300px;
  /* 这里设置父盒子的宽高，可以根据自己需求修改 */
}

#canvas {
  width: 100%;
  height: 100%;
  /* 这里设置canvas的宽高为100% */
}

const canvas = document.getElementById('canvas');
const parent = document.getElementById('parent');
canvas.width = parent.clientWidth;
canvas.height = parent.clientHeight;
/* 这里用JavaScript获取父盒子的宽高，并将canvas的宽高设置为相同值 */

通过以上代码，可以确保 Canvas 元素的宽高始终与父盒子保持一致，即使父盒子的尺寸发生变化。