如何让两层Canvas自动适配Flex布局左侧列空间？

我明白你的需求：要让两个层叠的Canvas在Flex布局的左侧列自动适配宽度（不用calc(100% - 300px)），而且当Canvas自身的绘图尺寸动态变化时，能自动缩放以适应容器，同时保持层叠效果。咱们来一步步解决这个问题：

核心问题分析 #

你之前的代码里有两个关键问题：

• 绝对定位的#canvas2没有相对定位的父容器，导致它相对于整个页面定位，而不是左侧列
• Canvas的实际绘图尺寸（元素的width/height属性）和显示尺寸（CSS的width/height）没有分离，动态修改属性尺寸后，Canvas不会自动缩放适配容器

解决方案代码 #

以下是修改后的完整代码，我会逐一解释关键调整：

HTML（结构不变，保持Flex容器结构）

<div class="container">
    <div class="canvas-wrapper column">
        <canvas id="canvas1"></canvas>
        <canvas id="canvas2"></canvas>
    </div>
    <div class="right-column column">
        Hello world
    </div>
</div>

CSS（关键调整部分）

/* 确保容器占满视口高度，避免内容溢出问题 */
html, body {
    height: 100%;
    margin: 0;
}

.container { 
    display: flex; 
    height: 100%; 
    background-color: yellow; 
}

.column { 
    border: 1px solid black; 
}

/* 左侧列：flex:1 自动占满剩余空间，同时设置为相对定位，作为Canvas的定位上下文 */
.canvas-wrapper { 
    margin: 1rem; 
    flex: 1; 
    position: relative;
    overflow: hidden; /* 防止Canvas超出容器时出现滚动条（可选） */
}

/* 两个Canvas都设置为绝对定位，铺满整个wrapper，同时用object-fit:contain保持绘图的宽高比，不会拉伸变形 */
.canvas-wrapper canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.right-column { 
    width: 300px; 
    display: flex;
    align-items: center;
    justify-content: center;
}

JS（调整绘图逻辑，确保修改尺寸后正确重绘）

var c1 = document.getElementById("canvas1"), ctx1 = c1.getContext("2d");
var c2 = document.getElementById("canvas2"), ctx2 = c2.getContext("2d");

// 封装一个绘图函数，避免重复代码
function drawCanvas(canvas, ctx, width, height, rectX, rectY, rectW, rectH, fillColor) {
    // 修改Canvas实际绘图尺寸
    canvas.width = width;
    canvas.height = height;
    // 清空画布（修改width/height会自动清空，但显式清空更稳妥）
    ctx.clearRect(0, 0, width, height);
    // 绘制背景矩形
    ctx.fillStyle = fillColor || "#000";
    ctx.fillRect(0, 0, width, height);
    // 绘制前景矩形
    ctx.fillStyle = fillColor === "#000" ? "green" : "red";
    ctx.fillRect(rectX, rectY, rectW, rectH);
}

setTimeout(() => {
    drawCanvas(c1, ctx1, 500, 300, 0, 0, 500, 300);
    drawCanvas(c2, ctx2, 500, 300, 50, 50, 100, 100);
}, 1000);

setTimeout(() => {
    drawCanvas(c1, ctx1, 1500, 500, 0, 0, 1500, 500);
    drawCanvas(c2, ctx2, 1500, 500, 100, 100, 100, 100);
}, 3000);

关键调整说明 #

1. 定位上下文：给.canvas-wrapper添加position: relative，让两个绝对定位的Canvas都相对于左侧列定位，确保层叠效果始终在左侧列内。
2. Canvas显示适配：通过width:100%; height:100%; object-fit:contain让Canvas的显示尺寸铺满容器，同时保持自身的宽高比，不会因为容器尺寸变化而拉伸变形。
3. Flex布局优化：移除了不必要的align-items: center和justify-content: center（这些会让Canvas在容器居中，但我们需要铺满容器），同时确保.container占满视口高度，避免布局塌陷。
4. 绘图逻辑封装：把重复的绘图代码封装成函数，每次修改Canvas尺寸后都能正确重绘，避免状态混乱。

这样调整后，无论Canvas的实际绘图尺寸怎么变化，都会自动缩放适配Flex布局的左侧列，完美满足你的需求！

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