Canvas文字渲染基线对齐核心是textBaseline决定y坐标锚定的基准线，配合textAlign实现精准定位；常用值包括"alphabetic"（默认）、"top"、"bottom"、"middle"（最直观）、"hanging"和"ideographic"（中文更稳）。
Canvas 中文字渲染的基线对齐，核心在于理解 textBaseline 是什么、它和 y 坐标的关系，以及如何配合 textAlign 实现稳定可靠的排版。
textBaseline 决定 y 坐标“锚在哪条线上”
传入 fillText(text, x, y) 的 y 值，并不是文字顶部或底部，而是你指定的某条基准线的位置。这条线由 ctx.textBaseline 控制，常见取值有：
-
"alphabetic"（默认）：y 对齐到字母基线（如 "x" 的下沿），但受 ascender/descender 影响，实际视觉位置浮动大 -
"top"：y 对齐到文字包围盒顶部（即最高点） -
"bottom"：y 对齐到文字包围盒底部（即最低点） -
"middle"：y 对齐到文字包围盒垂直中心，最直观、最常用 -
"hanging"：y 对齐到悬挂基线（常用于印度系文字，Web 中较少用） -
"ideographic"：y 对齐到表意文字基线（如中文汉字底部），对中日韩字体更稳
比如设 ctx.textBaseline = "middle"，再调 fillText("Hi", 100, 150)，那 "Hi" 的上下视觉中心就正落在 y=150 这条水平线上。
基线对齐失效的常见原因
- 混用
textBaseline和未适配的y值：例如设了"middle"却仍按"alphabetic"的习惯把 y 设成容器上边，结果文字飘出画布 - 忽略设备像素比（dpr）：高 DPI 屏幕下，若未用
ctx.scale(dpr, dpr)统一坐标系，y落在半像素位置，抗锯齿会模糊基线定位 - 字体本身 ascent/descent 差异大：同一字号下，不同字体（如
"serif"vs"system-ui"）的基线高度不一致，切换字体时需重新校准 y 偏移
让基线对齐真正可控的实操建议
- 垂直居中首选
"middle"+ 容器 CSS 高度中点作为 y 值（如画布高 300px，y 就取 150） - 顶部对齐用
"top"，y 设为容器顶部偏移（如 y = 20 表示文字顶边距画布顶 20px） - 底部对齐用
"bottom"，y 设为容器底部偏移（如 y = canvas.height - 10 表示文字底边距画布底 10px） - 中文/日文场景优先试
"ideographic"，它对汉字底部对齐更稳定，尤其搭配font: "16px sans-serif"时 - 动态计算时，可用
ctx.measureText("测试").actualBoundingBoxAscent等属性辅助微调，但注意兼容性（非所有浏览器支持）
配合 textAlign 实现精准定位textAlign 控制 x 方向锚点（left/center/right），textBaseline 控制 y 方向锚点，二者共同定义 (x, y) 是文字的哪个“角”或“中心”。例如：
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("标题", canvas.width / 2, canvas.height / 2);这段代码让文字严格居中——水平中心对齐 x，垂直中心对齐 y。
不复杂但容易忽略
