Canvas在Flex容器中无法仅靠absolute填满，因其绘图分辨率由width/height属性决定，而absolute只缩放显示尺寸；必须用ResizeObserver监听父flex-item尺寸，同步更新canvas.width/canvas.height并重绘。
Canvas在flex-item里用position: absolute填满，为什么不行
直接给canvas加position: absolute并设top: 0; left: 0; right: 0; bottom: 0，看起来“填满”了父容器，但实际画布内容会严重拉伸、模糊或错位。根本原因是：canvas的绘图坐标系仍由width和height属性决定，而position: absolute只改变布局位置，不触发canvas.width/canvas.height更新——它只是把一个300×150的默认画布强行拉伸到父容器尺寸。
必须同步更新canvas.width和canvas.height
只要Canvas被放入flex容器（尤其是flex: 1或width: 100%场景），就必须用JS读取其渲染后的真实尺寸，并赋值给HTML属性：
-
canvas.width和canvas.height必须是整数，建议用Math.floor(rect.width)和Math.floor(rect.height) - 不能只改
canvas.style.width/canvas.style.height——那是CSS缩放，不是重设分辨率 - 每次赋值后必须重绘，否则内容残留或消失
- 若父容器是
position: relative，absolute定位的canvas需确保父级有明确宽高（否则getBoundingClientRect()可能返回0）
用ResizeObserver监听flex-item尺寸变化
比起window.resize，ResizeObserver能精准捕获flex-item的实际渲染尺寸变化（比如侧边栏收起、响应式断点切换）：
- 监听对象必须是
canvas的**直接父元素**（即那个flex-item），不是canvas自己 - 回调中调用
canvas.getBoundingClientRect()，取width/height而非clientWidth/clientHeight（后者在display: none时可能不准） - 高DPI设备要乘
window.devicePixelRatio，再用CSS把显示尺寸缩回1:1，否则文字/线条发虚 - 避免在
ResizeObserver回调里频繁重绘；可加requestAnimationFrame节流
为什么flex-shrink: 0和min-width: 0也得配着用
Flex子项默认min-width: auto，内部有Canvas时容易被其固有尺寸（如默认300×150）撑开，导致无法收缩。常见表现：右侧flex-item被挤出视口，或Canvas只显示左上角一小块。
- 给Canvas父容器（即flex-item）加
min-width: 0; min-height: 0 - 若Canvas本身设了
width/height属性，记得删掉——它们会干扰flex计算 - 不要依赖
canvas.style.width = "100%"来“撑开”父容器，这会形成循环依赖
最易忽略的一点：Canvas重绘逻辑必须和尺寸更新绑定在同一帧，否则ctx.drawImage或路径绘制可能基于旧分辨率执行，结果偏移或裁剪。别省略ctx.clearRect(0, 0, canvas.width, canvas.height)这一步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
