Canvas在Flex容器中不随flex-item缩放的根源是其仅响应HTML的width/height属性而非CSS宽高；需用ResizeObserver监听父容器尺寸，同步更新canvas.width/height并重绘，同时注意DPI适配与性能优化。
Canvas在Flex容器里不随flex-item缩放的根源
Canvas元素默认不会响应CSS宽高设置，它只认width和height这两个HTML属性（即画布的“绘图坐标系分辨率”）。Flex容器可以拉伸canvas元素的盒模型尺寸（比如用flex: 1撑满），但若没同步更新canvas.width/canvas.height，画面就会被CSS拉伸变形或留黑边。
动态同步CSS尺寸与Canvas绘图分辨率
必须监听容器尺寸变化，并手动把CSS计算出的宽高赋给canvas.width和canvas.height，再重绘。不能只改style.width/style.height——那只是缩放显示，不是重设画布像素数。
- 用
ResizeObserver监听父flex-item尺寸（兼容性好，比window.resize更精准） - 读取
element.getBoundingClientRect()获取当前CSS渲染宽高 - 把该宽高赋给
canvas.width和canvas.height（注意：这是整数，需Math.floor） - 立即调用你的绘图逻辑（如
ctx.clearRect()+draw()）
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const resizeObserver = new ResizeObserver(entries => {
const { width, height } = entries[0].contentRect;
canvas.width = Math.floor(width);
canvas.height = Math.floor(height);
draw(); // 你自己的重绘函数
});
resizeObserver.observe(canvas.parentElement); // 观察flex-item容器Flex布局中Canvas的CSS写法要点
避免用flex: 1直接作用于canvas本身——Canvas是替换元素，flex行为不稳定。应包裹一层<div>作为flex-item，再让canvas100%填充该容器。
-
flex-item（外层div）设display: flex或仅作容器，加flex: 1、min-width: 0防溢出 -
canvas设display: block; width: 100%; height: 100%，确保填满且不换行 - 禁用
canvas { max-width: 100% }之类干扰尺寸读取的规则 - 若需保持宽高比，用
aspect-ratio（现代浏览器）或padding-top技巧控制外层div
缩放时重绘性能与清晰度陷阱
频繁调整canvas.width/height会触发Canvas内存重分配，可能卡顿；而单纯CSS缩放（不改width/height）虽快，但图像模糊、线条发虚。
立即学习“前端免费学习笔记（深入）”；
- 加节流：
ResizeObserver回调里用requestAnimationFrame延迟执行重绘 - 避免每像素都重绘：可先判断新旧尺寸是否真有变化（差值 > 2px 再更新）
- 高DPI设备需乘以
window.devicePixelRatio，否则在Retina屏上模糊（canvas.width = width * dpr，再用ctx.scale(dpr, dpr)） - 字体、描边等需按缩放系数动态调整，否则小尺寸下文字糊成一片
最易被忽略的是：Flex容器宽度可能受内容挤压（比如文本未折行），导致getBoundingClientRect()返回意外值——务必确保外层flex-item有明确的尺寸约束（如min-width: 0、overflow: hidden）。
