Canvas 绘制响应式布局：比例缩放与自适应逻辑

响应式Canvas核心是保持内容清晰、比例正确、坐标可用，需同步处理物理尺寸、CSS显示尺寸和坐标系缩放；必须用ResizeObserver监听容器变化，结合devicePixelRatio动态设置width/height并调用ctx.scale()，禁用混合缩放。

Canvas 实现响应式布局，核心不是“让画布跟着页面缩放”，而是“让绘制内容在不同尺寸容器中保持清晰、比例正确、坐标可用”。这需要同时处理三个层面：画布物理尺寸、CSS显示尺寸、绘图坐标系缩放。

画布尺寸必须与容器同步重设

Canvas 的 width 和 height 属性决定其内部像素缓冲区大小，不是 CSS 样式。仅改 style.width/style.height 会导致拉伸模糊；仅改 width/height 不调 CSS 尺寸，则画布默认按 300×150 占位。

1. 每次容器尺寸变化时，先获取父容器实际尺寸（如 container.clientWidth）
2. 乘以 window.devicePixelRatio 得到 canvas.width / canvas.height 值
3. 同时设置 canvas.style.width = '100%' 和 canvas.style.height = '100%'
4. 避免用固定值（如 width="640"），所有尺寸都应动态计算

高清屏必须适配 devicePixelRatio

在 Retina 或高 DPI 屏幕上，若忽略设备像素比，图形会发虚——因为 CSS 显示 200px 宽的区域，只用了 200 个逻辑像素绘制，而屏幕实际需要 400 个物理像素填充。

1. 设置 canvas.width = container.clientWidth × dpr
2. 设置 canvas.height = container.clientHeight × dpr
3. 再调用 ctx.scale(dpr, dpr)，使 drawRect(0,0,10,10) 真正画出 10×10 物理像素
4. 否则所有坐标和尺寸都要手动乘 dpr，极易出错且难以维护

监听尺寸变化要用 ResizeObserver，而非 window.resize

window.onresize 对 Flex/Grid 布局、组件折叠展开等场景完全失效，且移动端横竖屏切换时可能触发多次或滞后。

1. 优先使用 new ResizeObserver(() => resizeCanvas()) 监听父容器
2. 降级方案：用 setInterval 每 160ms 检查 container.offsetWidth 是否变化
3. 每次重设前，建议保存当前绘图状态（ctx.save()），重设后清空并重绘
4. 重绘函数应支持增量更新，避免全量重绘造成卡顿

缩放策略取决于交互需求

是否用 ctx.scale() 做视觉缩放，取决于你是否需要精确点击、碰撞检测或坐标映射。

1. 纯展示类图表（无交互）：可用 CSS transform: scale()，简单但坐标需手动换算
2. 带拖拽/点击的游戏或编辑器：必须用 resize + dpr + ctx.scale，保证鼠标位置与绘制坐标一一对应
3. 禁止混合缩放：比如 canvas.width=800，又用 CSS 放大 2 倍，再 ctx.scale(0.5) —— 多层缩放导致浮点误差累积、响应延迟
4. 横竖屏切换时，建议加防抖并校验宽高比，防止因 resize 触发两次导致比例错乱