使用 resizeobserver 监听 canvas 容器尺寸变化，获取 contentrect 宽高，结合 devicepixelratio 设置 canvas width/height 并缩放 ctx，再重绘；需 observe 容器、raf 优化、防抖及 disconnect 清理。
用 ResizeObserver 监控 Canvas 容器尺寸变化并重绘图像，核心在于：监听容器而非窗口，拿到新尺寸后重新设置 canvas 的 width/height 属性，并调用重绘逻辑。直接改 CSS 宽高不会改变绘制分辨率，必须操作 canvas 元素本身的属性。
监听容器并获取真实像素尺寸
ResizeObserver 默认返回的是 contentRect（内容区域），对 Canvas 来说，这通常就是你想要的可用绘制区域。注意它返回的是 CSS 像素，不是设备物理像素：
- 使用
entry.contentRect.width和entry.contentRect.height获取容器当前宽高 - 若需高清显示（如 Retina 屏），可结合
window.devicePixelRatio计算物理像素尺寸 - 避免用
getBoundingClientRect()替代——它可能受 transform、缩放等影响，而 contentRect 更稳定
重设 canvas 元素尺寸并保持清晰度
Canvas 清晰度取决于其 width 和 height 属性值（即“画布坐标系”大小），而非 CSS 样式。重绘前必须同步更新这两个属性：
- 先设置
canvas.width = Math.floor(width * dpr)和canvas.height = Math.floor(height * dpr) - 再用
ctx.scale(dpr, dpr)缩放绘图上下文，使逻辑坐标与 CSS 尺寸一致 - 最后执行你的绘图函数（如清空、路径绘制、填充等）
- 不重设 width/height 只改 CSS，会导致图像模糊或拉伸
绑定观察器并安全清理
一个典型的初始化流程包括创建观察器、开始监听、以及在组件卸载时断开连接：
- 用
new ResizeObserver(...)创建实例，回调中处理尺寸变更和重绘 - 调用
observer.observe(container)，其中 container 是 canvas 的父容器（推荐），或 canvas 自身（也可行） - 在组件销毁或 DOM 移除前，务必调用
observer.disconnect()防止内存泄漏 - 如需暂停监听某元素，可用
observer.unobserve(canvas)
配合 requestAnimationFrame 提升绘制流畅性
ResizeObserver 回调本身是异步的，但若重绘逻辑较重，可进一步包裹在 requestAnimationFrame 中，确保与浏览器刷新节奏同步：
- 在回调里用
requestAnimationFrame(() => { resizeCanvas(); draw(); }) - 避免在回调中直接执行复杂计算或大量 DOM 操作
- 对频繁变化的场景（如拖拽调整容器），可加简单防抖（如 16ms 内只触发一次）
