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 文本就能稳稳落位。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！