Canvas动态适配父容器时resize窗口高度持续增加问题求解

• 核心诱因是#canvas-container未设置固定高度规则，默认采用「子元素高度撑开父容器」的自适应逻辑。你每次将canvas高度设置为容器当前高度后，canvas尺寸变化会反过来撑高父容器，下一次resize事件触发时读取到的容器高度已经是被撑大后的数值，最终形成高度循环上涨的逻辑。
• 窗口调整过程中resize事件会高频触发，未做防抖处理的情况下短时间内会多次执行赋值逻辑，进一步加剧高度累加的问题。
• 代码中没有区分canvas的**画布分辨率属性（width/height）和页面显示尺寸（style.width/style.height）**的差异，同时赋值相同数值的操作放大了上述问题的影响。

1. 先给父容器和canvas添加固定的CSS规则，明确尺寸边界：

/* 若容器使用百分比高度，需确保html、body等所有上级元素都有明确高度声明 */
#canvas-container {
  width: 100%;
  /* 示例可替换为实际需要的高度规则，比如80vh、500px等 */
  height: 80vh;
  overflow: hidden;
}

#main-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

2. 优化脚本逻辑，添加防抖，避免重复赋值style尺寸：

<script>
    $(document).ready(() => {
        const canvas = document.getElementById('main-canvas');
        const container = document.getElementById('canvas-container');
        let resizeTimer = null;

        const adjustCanvasSize = () => {
            // 直接读取容器内容宽高，返回无单位纯数字
            canvas.width = container.clientWidth;
            canvas.height = container.clientHeight;
        }

        // 初始化尺寸
        adjustCanvasSize();

        // resize事件添加防抖，避免高频触发
        $(window).resize(() => {
            clearTimeout(resizeTimer);
            resizeTimer = setTimeout(adjustCanvasSize, 100);
        });
    });
</script>

内容的提问来源于stack exchange，提问作者Marcel Lorenz