canvas在flex容器中不随父容器缩放的根本原因是其绘图分辨率由html的width/height属性决定，而非css样式；必须用resizeobserver监听父flex-item尺寸，同步更新canvas.width/canvas.height为整数并重绘，同时适配devicepixelratio和设置min-width: 0。
Canvas在Flex容器里不随父容器缩放，根本不是CSS问题
Canvas是替换元素（replaced element），它的绘图分辨率由width和height这两个HTML属性决定，而不是style.width或style.height。Flex布局可以改变Canvas的布局盒尺寸（比如把canvas拉到800×600的CSS像素区域），但只要canvas.width还是默认的300、canvas.height还是150，浏览器就只能把300×150的像素缓冲区强行“拉伸”进800×600的显示框——结果就是模糊、变形、坐标错位。
常见错误现象包括：
• 画一条从(0,0)到(250,250)的线，实际只出现在左上角一小块
• getBoundingClientRect().width返回800，但canvas.width仍是300
• 鼠标点击位置和ctx.fillRect()落点完全对不上
为什么position: absolute填不满也不能解决问题
给canvas加position: absolute; top: 0; left: 0; right: 0; bottom: 0，看起来是“填满”了父flex-item，但它只是让渲染层做了CSS缩放，没碰canvas.width/canvas.height。这相当于把一张300×150的照片用CSS拉成全屏——图像必然糊，坐标系也彻底失准。
- 必须更新
canvas.width和canvas.height为整数，推荐用Math.floor(rect.width)和Math.floor(rect.height) -
canvas.style.width和canvas.style.height要显式设回CSS像素值（如"100%"或"800px"），否则父flex-item可能因尺寸未收敛而抖动 - 如果父flex-item没设
position: relative，absolute会相对于body定位，getBoundingClientRect()读出来的就不是你想要的尺寸
用ResizeObserver监听flex-item，不是监听canvas自己
Canvas自身尺寸不变时，ResizeObserver不会触发；真正变化的是它所在的flex-item（比如侧边栏收起、响应式断点切换）。所以必须观察canvas.parentElement，而不是canvas。
回调里务必用entries[0].contentRect，不要用canvas.clientWidth：
• clientWidth忽略transform、滚动偏移、border-box计算误差
• contentRect是渲染后的真实CSS像素尺寸，才是用户“看到的大小”
高DPI设备（如MacBook、iPhone）必须同步处理window.devicePixelRatio：
• 每次回调都重读devicePixelRatio，它在横竖屏切换、系统缩放变更时会动态变化
• 正确顺序：先取contentRect → 乘dpr赋给canvas.width/canvas.height → 再设style.width/style.height → 最后ctx.scale(dpr, dpr)
flex-item本身也要防“撑开”，否则Canvas连尺寸都读不准
Flex子项默认min-width: auto，Canvas作为替换元素有固有尺寸（300×150），会导致父flex-item被“撑大”，无法收缩到预期宽度——结果就是contentRect.width比你预想的小，甚至为0。
- 给Canvas的直接父容器（即那个flex-item）加
min-width: 0; min-height: 0 - 删掉Canvas上写的
width/height属性（如<canvas width="600"></canvas>），它们会干扰flex计算 - 别用
canvas { width: 100% }去“撑开”父容器——这会造成循环依赖，父容器尺寸不确定 → Canvas尺寸读不准 → flex分配异常 - 如果flex-item内部还有嵌套flex，它的子容器也要检查是否漏了
min-width: 0
canvas.width改了但draw()被节流到下一帧，中间那段时间Canvas内容就是空白或残留旧图——用户会看到闪动或错位。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
