resizeobserver 是解决 canvas 容器拉伸后比例失真的最轻量、最可靠方式，但它必须配合动态设置 canvas.width/canvas.height 和 ctx.scale() 才能真正对齐像素与显示尺寸；它精确监听容器内容区尺寸变化，避免 window.onresize 的漏触发与节流问题，且在 layout 前触发，更稳定。
ResizeObserver 是解决 Canvas 容器拉伸后比例失真的最轻量、最可靠方式，但它不能单独起作用 —— 必须配合动态设置 canvas.width/canvas.height 和 ctx.scale() 才能真正对齐像素与显示尺寸。
为什么 ResizeObserver 比 window.onresize 更适合 Canvas 尺寸同步
Canvas 失真本质是「渲染缓冲区尺寸」和「CSS 占据尺寸」不一致。比如容器被 CSS 拉宽到 375px，但 canvas.width 还是默认的 300，所有绘图坐标就被非线性挤压了。
ResizeObserver 能精确监听目标容器（而非整个窗口）的尺寸变化，且在 layout 阶段完成前触发，避免因滚动、动画或 flex 布局导致的尺寸抖动；而 window.onresize 会漏掉非窗口级的 resize（如 sidebar 展开、响应式卡片折叠），也容易被节流误伤。
关键点：
• ResizeObserver 回调中拿到的是 contentRect，即容器内容区尺寸，直接对应你希望 canvas 显示的宽高
• 它不依赖视口缩放、不触发重排，比监听 scrollWidth/scrollHeight 更稳定
必须同步更新 canvas.width / canvas.height，不能只改 style
CSS 的 width/height 只控制显示大小，canvas.width 和 canvas.height 才决定底层像素缓冲区大小。只改 style 相当于把一张 300×150 的图强行拉伸到 100% 宽度，必然模糊、错位。
正确做法：
- 在 ResizeObserver 回调里读取容器
contentRect.width和contentRect.height - 用它们乘以
window.devicePixelRatio设置canvas.width和canvas.height - 再用 CSS 把 canvas 的
style.width和style.height设为原始 contentRect 尺寸（不带 dpr） - 最后调用
ctx.scale(dpr, dpr)，让后续所有绘图坐标按逻辑像素书写，无需手动乘 dpr
示例片段：
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const container = canvas.parentElement;
const dpr = window.devicePixelRatio || 1;
<p>const ro = new ResizeObserver(entries => {
const { width, height } = entries[0].contentRect;
canvas.width = width <em> dpr;
canvas.height = height </em> dpr;
canvas.style.width = <code>${width}px</code>;
canvas.style.height = <code>${height}px</code>;
ctx.setTransform(dpr, 0, 0, dpr, 0, 0); // 重置并应用缩放
redraw(); // 清空并重绘全部内容
});
ro.observe(container);</p>
常见踩坑：redraw 时没清空或没重置 transform
每次尺寸变更后，旧的绘图内容仍留在缓冲区里，直接 draw 新内容会造成残留、重影；更隐蔽的问题是 ctx.scale() 是累积的 —— 如果不调用 ctx.setTransform(1, 0, 0, 1, 0, 0) 或 ctx.resetTransform()，连续 resize 两次会让缩放变成 dpr²，图形直接缩成小点。
务必检查以下几点：
-
redraw()函数开头是否执行了ctx.clearRect(0, 0, canvas.width, canvas.height) - 是否在每次 resize 后都重新调用
ctx.setTransform(dpr, 0, 0, dpr, 0, 0)，而不是只在初始化时做一次 - 是否在绘制文字、线条前，确认坐标已按逻辑像素（非物理像素）传入 —— 比如想画在容器正中央，x 应该是
container.clientWidth / 2，不是canvas.width / 2
移动端 Safari 的特殊处理：避免 useMap + ResizeObserver 冲突
如果 canvas 上叠加了 <map></map> 或热区定位逻辑，iOS Safari 在 ResizeObserver 触发时可能尚未完成 layout 计算，导致 contentRect 返回 0。这不是 bug，而是 WebKit 的 layout timing 差异。
稳妥解法：
- 加一层防零判断：
if (width > 0 && height > 0) { /* 执行尺寸更新 */ } - 对首次初始化，额外用
setTimeout(() => { ... }, 0)延迟一帧，确保 layout 完成 - 避免在
<canvas></canvas>上直接写usemap，改用绝对定位的透明<div> 模拟热区，完全脱离 canvas 渲染管线<p>真正难的不是监听尺寸，而是每次 resize 后那一整套像素对齐动作 —— 缓冲区、CSS、上下文变换、重绘逻辑，四个环节缺一不可。少一步，失真就回来。</p> </div>
