Canvas在flex容器中无法响应式缩小，根本原因是其绘图缓冲区（canvas.width/height）被锁死，CSS缩放不触发重绘；必须用ResizeObserver监听父容器尺寸变化，同步更新canvas宽高、style尺寸、调用clearRect()并统一在draw时处理ctx.scale(dpr,dpr)。
Canvas 在 flex 容器里无法响应式缩小，根本不是它“不听 flex 指令”，而是它的绘图分辨率被锁死在初始 width 和 height 属性值上——哪怕 CSS 把它压到 1px 宽，canvas.width 还是 300，浏览器只能强行拉伸像素缓冲区，结果就是模糊、错位、点击失灵。
flex-shrink: 0 或 flex: 1 为什么对 canvas 尺寸没用？
因为 flex 相关属性只影响布局盒（layout box）的分配，完全不触碰 canvas 的绘图缓冲区。你设 flex: 1，它会占满剩余空间；你设 flex: 0 0 auto，它仍按默认 300×150 渲染——CSS 再怎么缩，canvas.width 和 canvas.height 不变，重绘就不会发生。
-
flex: 1等价于flex: 1 1 0，直接把flex-basis设为 0，canvas 失去原始尺寸锚点，反而更难控制 -
flex-shrink: 0只阻止 flex 容器压缩它的布局盒，但 canvas 内部像素还是那 300×150，视觉上照样糊、照样错位 - 如果父容器没设
position: relative，getBoundingClientRect()返回的是相对于视口的尺寸，不是你想要的 flex-item 实际尺寸
为什么 getBoundingClientRect().width 返回非零，但 canvas 内容只显示左上角？
这是最典型的“分辨率错位”现象：你看到的 800×600 是 CSS 布局尺寸，但 canvas 的绘图缓冲区仍是 300×150。浏览器把 300×150 的像素块硬塞进 800×600 的显示框，所有坐标系都按比例放大了 2.67 倍，ctx.fillRect(0, 0, 100, 100) 实际只画在左上角一小块里。
- 别信
canvas.clientWidth——它受 transform、滚动、border-box 计算误差干扰，要用entries[0].contentRect.width - 必须用
Math.floor(rect.width * dpr)赋值给canvas.width，且必须是整数，小数会导致亚像素渲染和模糊 - 赋完
canvas.width后必须立刻调用ctx.clearRect(0, 0, canvas.width, canvas.height)，否则旧帧残留，新内容叠在上面
ResizeObserver 监听谁？为什么监听 canvas 自己是错的？
Canvas 元素自身尺寸几乎从不变化（HTML width/height 属性不变时），真正变的是它所在的 flex-item。侧边栏收起、tab 切换、响应式断点触发 flex 重排——这些操作都不会让 canvas 自身触发 ResizeObserver 回调，但它的父元素会。
- 必须监听
canvas.parentElement，不是canvas - 回调里第一件事是读
parentElement.getBoundingClientRect()，不是canvas.clientWidth - 高 DPI 设备（MacBook、iPhone）下漏掉
window.devicePixelRatio，画出来的内容一定发虚，文字边缘锯齿明显 - 别在 ResizeObserver 回调里直接
ctx.scale(dpr, dpr)——这会让所有后续绘制坐标偏移，应统一在每次draw()开头处理
真正卡住人的从来不是“怎么写 CSS”，而是 resize 后那一帧里，canvas.width、canvas.style.width、ctx.scale()、clearRect() 这四件事必须严格同步执行——漏掉任何一个，Canvas 就会进入不可预测的错位状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
