<p>Canvas在Flex容器中分辨率失真，根本原因是其绘图分辨率由HTML的width/height属性决定，而非CSS布局；必须用ResizeObserver监听父flex-item的contentRect，同步以Math.floor(rect.width * dpr)更新canvas.width/canvas.height并重绘，同时设置style宽高和ctx.scale(dpr, dpr)。</p>
Canvas在Flex容器中分辨率失真，根本不是Flex“搞坏了”它，而是Canvas的渲染机制和Flex的布局逻辑天然错位：Canvas画布尺寸由width和height这两个HTML属性决定，而Flex只控制CSS布局盒（即getBoundingClientRect()返回的尺寸）。只要canvas.width还是300、canvas.height还是150，哪怕Flex把它撑到1200×800的显示区域，浏览器也只能把那300×150像素强行拉伸——模糊、坐标漂移、鼠标点不准全由此来。
为什么flex:1 + width:0会让Canvas读不到尺寸
这是最常踩的坑：设flex:1本意是“占满剩余空间”，但它不触发Canvas重绘；加width:0更致命——它会让getBoundingClientRect().width返回0或NaN，后续JS根本拿不到有效尺寸。Canvas不是普通div，它需要明确的整数像素值才能初始化绘图缓冲区。
-
flex:1只影响布局分配，对canvas.width属性零影响 -
width:0会压垮CSS渲染尺寸，导致getBoundingClientRect()失效 - 必须删掉HTML里原始的
width="300"和height="150"，否则它们会锁死JS赋值 - 父元素没设
position:relative时，getBoundingClientRect()可能相对于body计算，尤其在折叠面板等场景下偏差极大
用ResizeObserver监听父元素，不是Canvas自己
Canvas自身尺寸不变时，ResizeObserver不会触发——真正变化的是它所在的Flex item（比如侧边栏收起、响应式断点切换）。所以必须观察canvas.parentElement，且回调里只信任entries[0].contentRect。
- 别用
canvas.clientWidth：它忽略transform、滚动偏移、border-box误差，数值不可靠 -
contentRect.width和contentRect.height是渲染后的真实CSS像素尺寸，才是用户“看到的大小” - 高DPI设备（MacBook/iPhone）必须乘
window.devicePixelRatio，但结果要Math.floor()取整，避免小数宽高引发渲染异常 - 每次更新后必须立刻
ctx.clearRect(0, 0, canvas.width, canvas.height)，否则旧帧残留+新坐标系错位
Canvas自适应必须同步完成的三件事
只改CSS尺寸、只改width/height属性、或只调ctx.scale()，任一缺失都会导致模糊或坐标错乱。三步必须原子化执行：
立即学习“前端免费学习笔记（深入）”；
- 读取父Flex item的
contentRect，拿到CSS像素宽高 - 赋值
canvas.width = Math.floor(rect.width * dpr)和canvas.height = Math.floor(rect.height * dpr) - 立即设置
canvas.style.width = rect.width + "px"和canvas.style.height = rect.height + "px"，再调ctx.scale(dpr, dpr)
漏掉ctx.scale()，所有坐标就得手动除以dpr；漏掉CSS尺寸重置，Flex容器可能因尺寸未收敛而抖动；漏掉Math.floor()，某些浏览器会拒绝非整数width赋值并静默失败。
