响应式Canvas核心是保持内容清晰、比例正确、坐标可用，需同步处理物理尺寸、CSS显示尺寸和坐标系缩放；必须用ResizeObserver监听容器变化，结合devicePixelRatio动态设置width/height并调用ctx.scale()，禁用混合缩放。
Canvas 实现响应式布局，核心不是“让画布跟着页面缩放”，而是“让绘制内容在不同尺寸容器中保持清晰、比例正确、坐标可用”。这需要同时处理三个层面：画布物理尺寸、CSS显示尺寸、绘图坐标系缩放。
画布尺寸必须与容器同步重设
Canvas 的 width 和 height 属性决定其内部像素缓冲区大小，不是 CSS 样式。仅改 style.width/style.height 会导致拉伸模糊；仅改 width/height 不调 CSS 尺寸，则画布默认按 300×150 占位。
- 每次容器尺寸变化时，先获取父容器实际尺寸（如
container.clientWidth） - 乘以
window.devicePixelRatio得到 canvas.width / canvas.height 值 - 同时设置
canvas.style.width = '100%'和canvas.style.height = '100%' - 避免用固定值（如 width="640"），所有尺寸都应动态计算
高清屏必须适配 devicePixelRatio
在 Retina 或高 DPI 屏幕上，若忽略设备像素比，图形会发虚——因为 CSS 显示 200px 宽的区域，只用了 200 个逻辑像素绘制，而屏幕实际需要 400 个物理像素填充。
- 设置 canvas.width = container.clientWidth × dpr
- 设置 canvas.height = container.clientHeight × dpr
- 再调用
ctx.scale(dpr, dpr)，使 drawRect(0,0,10,10) 真正画出 10×10 物理像素 - 否则所有坐标和尺寸都要手动乘 dpr，极易出错且难以维护
监听尺寸变化要用 ResizeObserver，而非 window.resize
window.onresize 对 Flex/Grid 布局、组件折叠展开等场景完全失效，且移动端横竖屏切换时可能触发多次或滞后。
- 优先使用
new ResizeObserver(() => resizeCanvas())监听父容器 - 降级方案：用 setInterval 每 160ms 检查
container.offsetWidth是否变化 - 每次重设前，建议保存当前绘图状态（
ctx.save()），重设后清空并重绘 - 重绘函数应支持增量更新，避免全量重绘造成卡顿
缩放策略取决于交互需求
是否用 ctx.scale() 做视觉缩放，取决于你是否需要精确点击、碰撞检测或坐标映射。
- 纯展示类图表（无交互）：可用 CSS transform: scale()，简单但坐标需手动换算
- 带拖拽/点击的游戏或编辑器：必须用 resize + dpr + ctx.scale，保证鼠标位置与绘制坐标一一对应
- 禁止混合缩放：比如 canvas.width=800，又用 CSS 放大 2 倍，再 ctx.scale(0.5) —— 多层缩放导致浮点误差累积、响应延迟
- 横竖屏切换时，建议加防抖并校验宽高比，防止因 resize 触发两次导致比例错乱
