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 把它“压回”设计尺寸。
立即学习“前端免费学习笔记（深入）”；
