Canvas 自适应失败主因是 flex:1 不触发重绘且 width:0 导致尺寸读取为0；正确做法是设 flex:0 0 auto、display:block、width/height:100%，删HTML宽高属性，用ResizeObserver同步更新canvas.width/height并clearRect重绘。
flex: 1 + width: 0 为什么不能让 Canvas 自适应
因为 flex: 1 只控制布局空间分配，不触发 Canvas 的绘图分辨率更新；width: 0 会直接把 Canvas 的 CSS 显示宽度压到 0，导致 getBoundingClientRect().width 返回 0 或 NaN，后续 JS 读取尺寸失败——Canvas 不是普通块级元素，它依赖明确的像素宽高才能重绘。
Canvas 在 Flex 容器里真正需要的 CSS 组合
Canvas 必须在有明确渲染尺寸的上下文中才能正确缩放。关键不是“让它变小再撑开”，而是“不让它用默认 300×150 锁死布局”：
-
flex: 0 0 auto是最安全的起点：防止被 flex-shrink 压缩，同时保留原始尺寸作为基准 - 父容器（即 Canvas 的直接父元素）必须设
position: relative，否则getBoundingClientRect()在某些折叠状态下可能不准 - Canvas 自身加
display: block; width: 100%; height: 100%，仅用于 CSS 层面拉伸显示，不替代canvas.width/canvas.height - 务必删掉 HTML 中的
width和height属性（如），否则会干扰 JS 动态赋值
ResizeObserver 回调里必须做的三件事
监听父 flex-item 尺寸变化时，只改样式或只改属性都不够，三步缺一不可：
- 用
canvas.parentElement.getBoundingClientRect()读宽高，取width/height（不是clientWidth） - 赋值
canvas.width = Math.floor(rect.width)和canvas.height = Math.floor(rect.height)—— 必须是整数 - 立即重绘：
ctx.clearRect(0, 0, canvas.width, canvas.height)后再画新内容，否则旧帧残留、坐标错位
移动端和高 DPI 设备的隐藏陷阱
在 iPhone 或 MacBook 上，Canvas 内容模糊、文字发虚，往往不是缩放问题，而是分辨率没对齐：
- 高 DPI 下需乘设备像素比：
const dpr = window.devicePixelRatio || 1，然后canvas.width = Math.floor(rect.width * dpr) - 但 CSS 显示尺寸仍要设回
canvas.style.width = rect.width + "px"，否则视觉放大 - 别在 ResizeObserver 回调里直接调
ctx.scale(dpr, dpr)—— 这会让所有坐标系偏移，应统一在绘制逻辑里处理 - 如果用了
requestAnimationFrame节流，确保尺寸读取和重绘在同一个帧内完成，否则ctx可能还在用上一帧的canvas.width
Canvas 的自适应难点不在布局，而在「尺寸更新」和「重绘时机」必须严格同步——漏掉 clearRect、写错 parentElement、或忘了 Math.floor，都可能导致内容错位或半屏空白。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
