textalign和textbaseline分别控制文本水平与垂直锚点，决定filltext(text,x,y)中文字哪部分精准落在(x,y)：textalign设left/center/right/start/end影响x对齐方式，textbaseline设alphabetic/middle/top/bottom/ideographic影响y对齐基线，二者需协同使用才能实现精确定位。
textAlign 和 textBaseline 是 Canvas 绘图上下文中的两个独立控制属性，分别管水平和垂直方向的“锚点位置”。它们不改变文字本身，而是决定：当你调用 fillText(text, x, y) 时，文字的哪一部分会精准落在你指定的 (x, y) 坐标上。
textAlign 控制水平锚点
它设定文本在 x 轴上的对齐基准线，影响的是整行文字与 x 坐标的对应关系：
- left：文字左边缘对齐 x 坐标（默认行为）
- center：文字水平中心点对齐 x 坐标（适合标题、按钮文字居中）
- right：文字右边缘对齐 x 坐标（常用于右对齐标签或数值）
- start / end：语义化写法，LTR 页面中等价于 left / right，推荐用于多语言项目
注意：设置一次即可生效，无需每行重复；但要确保所有行使用相同的 textAlign，并配合统一的 x 值（例如 center 就始终用 canvas.width / 2）。
textBaseline 控制垂直锚点
它定义 y 坐标对应文字的哪条“基线”，直接影响文字在垂直方向上的落点：
- alphabetic：默认值，y 对齐字母基线（英文友好，中文可能略偏高）
- middle：y 对齐文字视觉中心，最直观可控，适合居中排版
- top：y 对齐文字顶部（含上升部），适合顶部对齐场景
- bottom：y 对齐文字底部（含下降部），少用，易误判
- ideographic：对齐表意文字基线（如汉字主笔画区域），中文显示更稳
若需垂直居中一个容器内的单行文字，推荐 ctx.textBaseline = 'middle'，再把 y 设为容器高度一半（如 y = canvas.height / 2）。
组合使用的关键细节
两者必须协同设计，不能只调一个：
- 想让一段文字在画布正中央？设
textAlign = 'center'、textBaseline = 'middle'，再用fillText(text, canvas.width/2, canvas.height/2) - 多行文本时，每行 y 坐标要递增（如 +24px），但 x 保持不变，且 textAlign 必须一致
- 高 DPI 屏幕下，只要坐标按 CSS 像素传入（不乘 dpr），缩放后对齐依然准确
- 调试时可临时画一条竖线
moveTo(x,0); lineTo(x,canvas.height)，看文字是否真按预期贴合
常见误区提醒
这些容易导致对齐“看起来不对”：
- 混淆 textBaseline 的 y 含义：它不是文字顶部，也不是盒子中心，而是某条基线——选错值会导致整体上浮或下沉
- 在 scale 缩放后，又手动把 y 乘以设备像素比，造成双重偏移
- 给多行文本混用不同 textAlign（比如第一行 center，第二行 left），结果各行左右错位
- 依赖 measureText().width 做换行却没考虑字体实际渲染宽度差异（尤其中英混排）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
