Canvas文本对齐由textAlign和textBaseline控制：textAlign决定x轴锚点（left/center/right等），textBaseline决定y轴基准线（alphabetic/middle/top等），二者需配合fillText的(x,y)锚点使用。
Canvas 中的文本对齐不是靠 CSS，而是通过 textAlign 和 textBaseline 两个绘图上下文属性控制的。它们共同决定了文字在指定坐标点（x, y）处的定位方式，理解它们的参考基准是写出整齐、可控文本的关键。
textAlign：控制文字在 x 轴上的对齐方式
textAlign 决定的是「以哪个位置为锚点」来对齐文字与你传入的 x 坐标。它不影响文字高度，只影响水平方向的起始/中心/结束位置。
-
left：文字左边缘落在
x处（默认值） -
center：文字水平中心点落在
x处 -
right：文字右边缘落在
x处 - start：按当前方向（ltr/rtl）对齐起始边（如 ltr 下等同 left）
- end：按当前方向对齐结束边（如 ltr 下等同 right）
例如：ctx.textAlign = 'center'; ctx.fillText('Hello', 200, 100); 表示 “Hello” 的水平中心正对 (200, 100) 这个点。
textBaseline：决定文字在 y 轴上以哪条线为基准对齐
textBaseline 控制的是「哪一条线」与你传入的 y 坐标重合。它不改变字体大小，但极大影响垂直位置感，尤其在混合图形与文本时容易出错。
立即学习“前端免费学习笔记（深入）”；
- alphabetic：字母基线（默认值），y 对齐到小写字母如 "x" 的底部
- top：文字最顶端（含升部 ascender）对齐 y
- hanging：悬挂基线（如印度系文字常用），略高于 alphabetic
- middle：文字整体垂直中心对齐 y（视觉上最“居中”的选择）
- ideographic：汉字/日文等表意文字的底边（含降部 descender）对齐 y
- bottom：文字最底端（含降部）对齐 y
多数 UI 场景中，若想让文字在某个矩形框内垂直居中，推荐用 textBaseline = 'middle' 配合手动计算 y 坐标（如 y = rectY + rectHeight / 2）。
组合使用技巧与常见误区
单独设对齐没用，必须同时考虑 textAlign 和 textBaseline，因为 fillText 的 (x, y) 是一个「锚点」，而非左上角。
- 画标题居中？
textAlign = 'center'; textBaseline = 'middle'; fillText(txt, canvas.width/2, canvas.height/2); - 右对齐标签？
textAlign = 'right'; textBaseline = 'alphabetic'; fillText(txt, xMax, yLine); - 别依赖默认值写关键布局——
alphabetic基线下，“gjpqy”会明显下沉，可能误判位置 - 测量文本高度要用
ctx.measureText()结合font设置，不能靠fontSize简单除 2
字体设置影响对齐表现
font 属性不仅决定外观，还直接影响基线位置和字宽。不同字体的 ascender/descender 比例差异很大。
- 始终显式设置
ctx.font = '16px sans-serif';，避免继承不确定的默认字体 - 中文建议优先用
Microsoft YaHei、system-ui或Segoe UI，比serif更稳定 - 字号变化时，
textBaseline的实际像素偏移也会变，需同步验证
不复杂但容易忽略。把 (x, y) 当作一个可配置的“挂点”，再选对两个对齐轴，Canvas 文本就能稳稳落位。
