动态监控 Canvas 尺寸变化与重绘方法

本文深入讲解了如何利用 ResizeObserver 动态监控 Canvas 容器尺寸变化并实现高清、无损的自动重绘，强调监听容器而非窗口、精准获取 contentRect 尺寸、结合 devicePixelRatio 设置 canvas 原生宽高与上下文缩放的关键实践，同时涵盖 requestAnimationFrame 优化、防抖处理及 observer 安全清理等生产级细节，帮助开发者彻底解决 Canvas 在响应式布局中模糊、拉伸或重绘失效的常见痛点。

用 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 内只触发一次）

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~