Canvas在高分屏模糊的根本原因是CSS像素与设备物理像素不匹配，需按devicePixelRatio缩放canvas.width/height并调用ctx.scale(dpr,dpr)校正。
Canvas 在高分屏上模糊，本质是 CSS 像素和设备物理像素不匹配，不是 canvas 画布本身“画得不清”，而是被浏览器强行拉伸了。
为什么 canvas 在 Retina / 高 DPI 屏上会模糊
高分屏（如 macOS Retina、Windows 200% 缩放、iPhone）的设备像素比（window.devicePixelRatio）大于 1，但默认情况下：canvas.width 和 canvas.height 指的是 CSS 像素尺寸，而 canvas 的绘图上下文实际渲染在更高密度的物理像素网格上——导致浏览器把原本 1×1 的逻辑像素“摊开”到多个物理像素，图像就糊了。
常见错误现象：
• canvas 看起来发虚、边缘锯齿感弱但整体朦胧
• 文字或细线特别模糊，哪怕用了 ctx.imageSmoothingEnabled = false
• 在普通屏正常，一插 MacBook 或开 Windows 缩放立刻变糊
- 根本原因不是抗锯齿开关，而是画布的
width/height属性没按设备像素比放大 - CSS 设置的
width/height（例如style="width:300px;height:200px"）只控制显示尺寸，不影响绘制分辨率 - 必须手动同步：CSS 尺寸 ×
window.devicePixelRatio→ canvas 内部尺寸
正确设置 canvas 分辨率的三步法
核心逻辑：让 canvas 的内部绘图缓冲区（canvas.width/canvas.height）覆盖全部物理像素，再用 CSS 把它“压回”设计尺寸。
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 获取当前设备像素比：
const dpr = window.devicePixelRatio || 1 - 设置 canvas 的 CSS 显示尺寸（比如你想要 300×200 的视觉区域）：
canvas.style.width = "300px"; canvas.style.height = "200px" - 设置 canvas 实际绘图缓冲区尺寸：
canvas.width = 300 * dpr; canvas.height = 200 * dpr - 最后别忘了缩放绘图上下文，否则内容会被压缩成 1/dpr 大小：
ctx.scale(dpr, dpr)
示例代码：
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const dpr = window.devicePixelRatio || 1;
const rect = canvas.getBoundingClientRect();
canvas.width = rect.width * dpr;
canvas.height = rect.height * dpr;
canvas.style.width = rect.width + "px";
canvas.style.height = rect.height + "px";
ctx.scale(dpr, dpr);响应式场景下必须监听 resize 和 devicePixelRatio 变化
用户可能动态调整窗口大小、切换显示器、更改系统缩放比例（比如从 100% 切到 125%），这些都会让 devicePixelRatio 或 canvas 显示尺寸变化，不重置就会再次模糊。
- 仅监听
window.resize不够：Windows 缩放变更时不一定触发 resize - 更稳妥的做法是结合
matchMedia监听缩放变化：matchMedia("(resolution: 2dppx)").addEventListener("change", updateCanvas) - 实际项目中建议封装一个
setupHiDPICanvas(canvas)函数，在初始化和每次 resize 后都调用一次 - 注意：频繁重设
canvas.width/height会清空绘图缓冲区，如有持久内容需重新绘制
使用 toDataURL 或导出图片时仍模糊？检查是否漏了 DPR 缩放
即使 canvas 显示正常，用 canvas.toDataURL() 导出的图片仍可能模糊——因为导出的是当前 canvas 缓冲区的原始像素，如果缓冲区没按 DPR 放大，导出的就是低分辨率图。
- 导出前确认：
canvas.width和canvas.height已按dpr设置到位 - 不要依赖 CSS 尺寸去推算，用
canvas.width/canvas.height获取真实缓冲区大小 - 若需固定输出尺寸（如 1920×1080 PNG），应先临时将 canvas 设为该尺寸 × dpr，绘制，导出，再恢复原缓冲区
- WebGL canvas 同理，需设置
gl.canvas.width/gl.canvas.height并调用gl.viewport
最容易被忽略的一点：很多库（如 Chart.js、Fabric.js）默认不处理 DPR，得查文档看有没有 enableHiDPI 这类开关；自己封装 canvas 工具函数时，ctx.scale(dpr, dpr) 这一步漏掉，前面全白做。
