Canvas高清渲染需三步：适配设备像素比（DPR）确保物理像素匹配，强制整数坐标避免亚像素模糊，控制每帧≤8.3ms保障120Hz流畅。
要在高分屏（如 Retina、2K/4K 显示器、120Hz 设备）上让 Canvas 实现清晰、流畅、无锯齿的视觉体验，核心不是“画得更多”，而是“算得更准、画得更稳”。关键在于三件事：正确适配设备像素比、避免浮点坐标模糊、控制每帧渲染开销在 8.3ms 内。下面从实操角度拆解。
适配设备像素比（DPR），解决模糊根源
高分屏模糊的首要原因是 Canvas 的逻辑像素和物理像素不匹配。比如 CSS 设置 width: 300px; height: 150px，但 DPR=2 时，浏览器会把 300×150 的画布拉伸到 600×300 物理像素，导致插值模糊。
- 获取真实缩放比例：
const dpr = window.devicePixelRatio || 1 - 设置 Canvas 像素尺寸：
canvas.width = Math.floor(300 * dpr); canvas.height = Math.floor(150 * dpr); - 用 CSS 固定显示尺寸：
canvas.style.width = '300px'; canvas.style.height = '150px'; - 绘制前应用缩放：
ctx.scale(dpr, dpr);（确保所有坐标按逻辑像素写，自动适配）
规避非整数坐标，消除边缘虚化
Canvas 对 sub-pixel 坐标（如 x = 10.3）默认启用抗锯齿，反而造成线条发虚、文字重影。尤其在绘制细线、边框、小字号文本时非常明显。
- 对齐到物理像素：绘制前对坐标四舍五入，
ctx.fillRect(Math.round(x), Math.round(y), w, h) - 禁用抗锯齿（仅限明确需要硬边时）：
ctx.imageSmoothingEnabled = false;（适用于像素风、UI 框线） - 文字渲染加粗或提升字号：小字号（≤12px）在高 DPR 下极易糊，建议最小用 14px，并配合
ctx.textRendering = 'optimizeLegibility';
分层+预渲染，守住 120fps 稳定帧率
高刷屏下，一帧只有 8.3ms 预算。反复清空重绘整个 Canvas、动态生成渐变、每帧计算路径，都会超时。必须把“不变的”提前画好，“变的”轻量更新。
- 用双 Canvas 分层：底层画静态背景（只初始化一次），顶层画进度条/检测框（每帧只 drawImage）
- 渐变纹理预渲染：创建一个离屏 Canvas，一次性画好完整渐变条（带圆角、透明过渡），后续只需
ctx.drawImage(gradCanvas, 0, 0, width, height, x, y, width, height) - 动画用
requestAnimationFrame，且每帧只做必要操作：不重复创建路径、不反复设 fillStyle、不清除整块画布（改用clearRect局部擦除）
字体与图形细节增强技巧
表格线发虚、图标锯齿、文字有重影——这些不是 Canvas 能力问题，是渲染策略问题。
- 1px 线条要按 DPR 加粗：DPR=2 时，用
lineWidth = 2才能呈现真正的 1px 视觉宽度 - 圆角矩形用
arcTo或路径 +clip，避免fillRect+globalCompositeOperation叠加造成的边缘混合 - 图标类图形优先用 SVG 转 Canvas 路径（而非 drawImage 图片），保证缩放不失真
- 必要时开启高质量渲染提示：
ctx.webkitImageSmoothingEnabled = false;、ctx.mozImageSmoothingEnabled = false;
