根本原因是设备像素比（dpr）拉伸坐标系后，textbaseline和textalign仍按css像素锚定，导致filltext坐标落于半像素触发抗锯齿而偏移；解决关键是用ctx.scale(dpr,dpr)统一绘图上下文，使x/y保持css像素书写逻辑，并配合textalign="center"、textbaseline="middle"及整数坐标绘制确保对齐。
Canvas 文字在高分辨率设备上出现对齐偏差，根本原因不是字体本身，而是坐标系被设备像素比（dpr）拉伸后，textBaseline 和 textAlign 仍按原始逻辑锚定，但实际像素位置已偏移。解决的关键是统一绘图坐标系与视觉预期的一致性。
适配设备像素比并重置绘图上下文
不处理 dpr 时，1px 的 CSS 宽度可能对应 2 或 3 个物理像素，fillText 的 (x, y) 坐标会落在“半像素”位置，触发抗锯齿，导致文字发虚、基准线错位。
- 获取当前设备像素比：
const dpr = window.devicePixelRatio || 1 - 设置 canvas 内部尺寸为 CSS 尺寸 × dpr：
canvas.width = canvas.offsetWidth * dpr; canvas.height = canvas.offsetHeight * dpr - 用
ctx.scale(dpr, dpr)缩放绘图上下文，使后续所有坐标（包括 fillText 的 x/y）仍按 CSS 像素书写，无需重算 - 确保 canvas.style.width/height 保持 CSS 像素值（如
"400px"），否则渲染区域会被拉伸
文字对齐参数需配合缩放后的坐标系使用
scale 后，textBaseline 和 textAlign 的行为不变，但它们作用的 (x, y) 是你“写出来的 CSS 像素值”，所以只要逻辑一致，对齐就不会漂移。
- 水平居中：设
ctx.textAlign = "center"，再调用fillText(text, centerX, y)，其中centerX是容器 CSS 宽度的一半（如 200） - 垂直居中：推荐
ctx.textBaseline = "middle"，y 坐标取容器 CSS 高度中点（如y = 150），而非依赖 alphabetic 基线去猜 - 避免混合使用：不要在 scale 后又手动把 y 乘以 dpr，那会导致双重缩放、严重偏移
防止字体渲染模糊的辅助措施
即使坐标对齐正确，文字仍可能因渲染策略显得毛边或轻淡。
- 关闭非必要抗锯齿：
ctx.imageSmoothingEnabled = false（注意：此开关对文字效果有限，主要影响图片） - 优先选用清晰字体：如
ctx.font = "bold 16px -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"，避开易糊的衬线体 - 强制整数坐标绘制：对关键文字，用
Math.round(x)和Math.round(y)确保落点在像素格中心，减少亚像素渲染 - CSS 层面加固：给 canvas 元素加样式
image-rendering: pixelated; -webkit-backface-visibility: hidden;，部分浏览器可抑制模糊插值
验证对齐是否真正准确的小技巧
光看文字容易误判，建议叠加参考线快速验证：
- 画一条竖线穿过目标 x 坐标（如
ctx.moveTo(x, 0); ctx.lineTo(x, canvas.height);），观察文字是否严格对齐该线 - 画一条横线在目标 y 处（如
ctx.moveTo(0, y); ctx.lineTo(canvas.width, y);），检查 textBaseline 是否真实贴合 - 在不同 dpr 设备（或用 Chrome DevTools 模拟 2x/3x）反复对比，确认文字位置无跳变
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
