如何通过 ResizeObserver 动态监控 DOM 容器尺寸以重绘支持高清 Retina 屏的 Canvas 图表-js教程-PHP中文网

resizeobserver 的 contentrect 返回 css 像素值，不能直接赋给 canvas.width/height，否则在 retina 屏下因未乘 devicepixelratio 导致渲染模糊；必须用 contentrect 尺寸 × dpr 设置 canvas 属性，并调用 ctx.scale(dpr, dpr) 重置坐标系。

如何通过 resizeobserver 动态监控 dom 容器尺寸以重绘支持高清 retina 屏的 canvas 图表

ResizeObserver 能精准监听容器尺寸变化，但直接用 contentRect 设置 Canvas 像素值会导致 Retina 屏模糊——必须结合 window.devicePixelRatio 手动缩放 canvas 的 width/height 属性，否则图表线条发虚、文字锯齿。

为什么 `contentRect` 不能直接当 canvas 像素尺寸用

Canvas 渲染质量取决于其 DOM 属性 width 和 height（单位：CSS 像素），而非 CSS 样式宽高。Retina 屏下，1 个 CSS 像素可能对应 2 或 3 个物理像素。entry.contentRect.width 返回的是 CSS 像素值，若直接赋给 canvas.width，实际渲染分辨率就只有 1x，必然模糊。

contentRect.width 是布局计算后的 CSS 像素，和设备无关
canvas.width 必须是整数，且应等于 cssWidth × devicePixelRatio
忽略 devicePixelRatio 是高清屏图表模糊最常见原因
设置 canvas.style.width 后，还需同步调整 canvas.width，否则会拉伸失真

如何在 ResizeObserver 回调里正确重设 canvas 分辨率

核心是三步：读 CSS 尺寸 → 计算物理像素 → 重设 canvas 属性 + 重绘坐标系。不能只改 style，也不能漏掉 ctx.scale()。

Markdown Canvas

将Markdown文件转换为美观的HTML页面，适用于Canvas或浏览器查看。用于用户请求渲染、可视化、显示或分享Markdown文件时。

下载

先获取 entry.contentRect 的 width 和 height
用 const dpr = window.devicePixelRatio || 1 获取设备比
设置 canvas.width = Math.floor(width * dpr)，canvas.height = Math.floor(height * dpr)
立刻执行 ctx.scale(dpr, dpr)，让后续绘图坐标自动适配
最后调用你的重绘逻辑（如清空、重画柱状图、重设文字大小）

const canvas = document.getElementById('my-chart');
const ctx = canvas.getContext('2d');
const resizeObserver = new ResizeObserver(entries => {
  const entry = entries[0];
  const { width, height } = entry.contentRect;
  const dpr = window.devicePixelRatio || 1;
<p>canvas.width = Math.floor(width <em> dpr);
canvas.height = Math.floor(height </em> dpr);
canvas.style.width = <code>${width}px</code>;
canvas.style.height = <code>${height}px</code>;</p><p>ctx.scale(dpr, dpr); // 关键：重置坐标系
redrawChart(); // 你自己的绘图函数
});
resizeObserver.observe(canvas.parentElement);</p>

监听父容器而非 canvas 自身更稳妥

直接观察 canvas 元素本身容易出问题：某些 CSS 布局（如 transform: scale()）会改变渲染尺寸但不触发 ResizeObserver；而父容器（比如 div#chart-wrapper）的 contentRect 更稳定，且能覆盖侧边栏折叠、Flex 容器收缩等真实业务场景。