关键在于让绘制逻辑与物理像素严格对齐。需按dpr重设canvas物理尺寸、用ctx.scale统一坐标系、对齐整数坐标并优化字体，以消除高清屏亚像素模糊。
关键不是“加粗”或“调亮度”，而是让绘制逻辑与物理像素严格对齐。高清屏模糊的根源是设备像素比（dpr）导致坐标落在半像素位置，触发亚像素抗锯齿。解决路径分三步：重设画布物理尺寸、缩放绘图上下文、规范坐标与字体使用。
按 dpr 重设 canvas 物理宽高
canvas 元素有两个尺寸概念：CSS 显示尺寸（决定页面占位）和内部像素尺寸（决定实际绘图精度）。默认两者一致，但在 dpr > 1 的设备上就会模糊。
- 用
container.getBoundingClientRect()获取 CSS 像素宽高 - 将
canvas.width和canvas.height设为：cssWidth × dpr和cssHeight × dpr - 保持
canvas.style.width和canvas.style.height为原始 CSS 值（如"400px"），否则视觉会被拉伸
用 ctx.scale 统一坐标系
光改 canvas 尺寸还不够——此时所有 fillRect、lineTo、fillText 的坐标都会被放大 dpr 倍，导致位置错乱。必须同步缩放绘图上下文：
- 执行
ctx.scale(dpr, dpr)，此后你写的(100, 50)仍代表 CSS 像素位置 - 所有绘制操作（包括文字
x/y、线条起点终点）继续按 CSS 像素写，无需乘 dpr - 避免混用：不要在 scale 后又手动把坐标 × dpr，会造成双重缩放、严重偏移
确保线条和文字落点精准
即使坐标系对齐，边缘仍可能发虚，因浏览器对非整数坐标默认启用抗锯齿。需主动约束落点：
立即学习“前端免费学习笔记（深入）”；
- 画线时，用
Math.round(x)和Math.round(y)对齐像素中心；例如：ctx.lineTo(Math.round(x), Math.round(y)) - 文字绘制优先用
textBaseline = "middle"+textAlign = "center"，y 坐标取整数中点（如y = Math.round(height / 2)） - 关闭非必要平滑：
ctx.imageSmoothingEnabled = false（对文字效果有限，但可关） - CSS 层加固：给 canvas 加样式
image-rendering: pixelated; -webkit-backface-visibility: hidden;
字体与渲染策略优化
清晰度也受字体本身影响。系统字体在高分屏下表现差异大：
- 避免衬线体（如 Times New Roman），优先选用无衬线清晰字体：
ctx.font = "bold 14px -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" - 中文场景可加「微软雅黑」「PingFang SC」等明确支持高清渲染的字体名
- 不依赖
font-size过小（如 <12px），小字号在缩放后更易糊，建议最小 13px 起
