Canvas 在 Flex 容器中不自适应的根本原因是未动态设置 canvas.width 和 canvas.height 属性，仅靠 CSS 的 flex: 1 或 width: 100% 无法改变其内部像素缓冲区尺寸，导致拉伸模糊、坐标错位；必须用 ResizeObserver 监听父元素（非 canvas 自身），结合 getBoundingClientRect() 获取整数尺寸并乘以 devicePixelRatio，赋值后立即 clearRect 并重绘。
Canvas 在 Flex 容器里不自适应，根本不是 CSS 没写对，而是你没动 canvas.width 和 canvas.height 这两个 HTML 属性。
为什么 flex: 1 或 width: 100% 都不管用
Flex 布局能拉伸 canvas 的显示区域（比如把它的 CSS 尺寸撑到 800×600），但只要 canvas.width 还是默认的 300、canvas.height 还是 150，浏览器就只能把这 300×150 的像素缓冲区强行拉伸渲染——结果就是模糊、坐标错位、鼠标点不准。
-
flex: 1只分配空间，不触发重绘，也不改画布分辨率 -
width: 100%或style.width = "100%"只影响 CSS 渲染层，Canvas 内部坐标系完全没变 - 删掉 HTML 中的
width="300"和height="150"属性，否则 JS 动态赋值会被覆盖
必须用 ResizeObserver 监听父 flex-item，不是 canvas 自身
Canvas 元素尺寸不变时，ResizeObserver 不会触发；真正变化的是它所在的 flex-item（比如侧边栏收起、响应式断点切换）。所以监听对象必须是 canvas.parentElement。
- 监听
canvas自己几乎永远不触发回调，因为它的width/height属性没变 - 父元素必须设
position: relative，否则getBoundingClientRect()返回的是相对于视口的坐标，不是你想要的局部尺寸 - 读取用
parent.getBoundingClientRect().width，不是parent.clientWidth—— 后者可能忽略 margin 或 transform 影响
赋值 canvas.width 和 canvas.height 必须是整数，且要立即重绘
Canvas 的绘图缓冲区只接受整数宽高，小数会导致渲染异常或降级行为。赋值后不重绘，旧帧残留，新坐标系和旧内容叠加，视觉和交互全乱。
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
立即学习“前端免费学习笔记（深入）”；
- 用
Math.floor(rect.width)和Math.floor(rect.height)，别用parseInt或四舍五入 - 赋完必须立刻调用
ctx.clearRect(0, 0, canvas.width, canvas.height)，再画新内容 - 高 DPI 设备（如 MacBook、iPhone）要乘
window.devicePixelRatio：canvas.width = Math.floor(rect.width * dpr);canvas.height = Math.floor(rect.height * dpr);但canvas.style.width和canvas.style.height仍设为 CSS 像素值（如"800px"），否则布局抖动
移动端和嵌套 flex 容器里的隐藏坑
这些地方最容易漏掉，一上线就糊、就错位、就卡住不动。
- 如果父 flex-item 是嵌套在另一个 flex 容器里，外层没设
flex: 1或height: 100%，内层getBoundingClientRect()可能返回height: 0 - 用了
requestAnimationFrame节流，必须确保尺寸读取和clearRect在同一帧完成，否则 ctx 还在用上一帧的canvas.width - 别在 ResizeObserver 回调里直接
ctx.scale(dpr, dpr)—— 这会让所有绘制坐标偏移，应统一在绘制逻辑开头处理缩放
Canvas 自适应真正的难点不在“怎么让它变大”，而在“什么时候更新分辨率”和“更新之后那一帧有没有清干净”。漏掉 clearRect，或者把 ResizeObserver 监听对象搞错，90% 的模糊和错位问题就都来了。
