fillText() 渲染实心文字，strokeText() 仅描边；两者参数均为 ctx.fillText(text, x, y[, maxWidth])，y 指基线位置而非顶部，需配合 font、fillStyle/strokeStyle 及 textBaseline（如 "middle"）正确对齐。
canvas.fillText() 和 canvas.strokeText() 怎么用
直接调用 fillText() 渲染实心文字，strokeText() 只描边不填充。两者参数完全一致：ctx.fillText(text, x, y[, maxWidth])。注意 y 是文字基线（baseline）位置，不是顶部，所以设 y = 50 时文字可能大部分在 y=50 上方——这是新手最常困惑的点。
常见错误现象：文字“看不见”或“切掉一半”，大概率是 y 值太小（比如设成 10），而默认字体大小为 10px 时，基线以下还有下降部（descender），实际文字从 y - 8 左右开始绘制。
-
maxWidth是可选参数，超出时自动缩放文字宽度（非截断），但浏览器支持不稳定，建议手动控制文本长度或换行 - 必须先设置
font、fillStyle（对fillText）或strokeStyle（对strokeText），否则用默认值（通常是黑色 10px sans-serif） - 两次调用
fillText()不会自动换行，需自己计算y增量（如加lineHeight）
如何正确设置 font 属性
ctx.font 必须是 CSS 字体语法字符串，且顺序固定：粗细 + 字号 + 字体族，例如 "bold 16px 'Helvetica Neue', sans-serif"。不能只写 "16px" 或 "Arial"，否则整个属性被忽略，回退到默认 "10px sans-serif"。
字号单位只能是 px、em（相对 canvas 元素自身字体）、rem（不推荐，无根元素上下文）；pt、cm 等不被支持。使用 web 字体时，需确保 @font-face 已加载完成，并监听 FontFaceSet.load()，否则文字可能渲染为空白或回退字体。
立即学习“前端免费学习笔记（深入）”；
- 动态修改
font后，后续所有fillText/strokeText都生效，无需重复设置 - 字号影响
measureText()结果，也影响基线位置计算，不要混用不同单位 - 中文字体建议显式指定，如
"14px 'PingFang SC', 'Microsoft YaHei', sans-serif"，避免系统 fallback 导致宽度突变
文字对齐与基线怎么控制
textAlign 控制水平对齐（"left"、"center"、"right"、"start"、"end"），textBaseline 控制垂直对齐（"top"、"hanging"、"middle"、"alphabetic"、"ideographic"、"bottom"）。默认是 textAlign = "start"、textBaseline = "alphabetic" —— 这正是基线行为反直觉的根源。
例如，想让文字“居中显示在画布中央”，别只写 ctx.textAlign = "center"; ctx.fillText("Hi", width/2, height/2)，因为 height/2 对应的是基线位置，文字整体会上移。更稳妥的做法是：
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("Hi", width/2, height/2);若需精确顶部对齐（如 UI 标题），用 textBaseline = "top"；若渲染日文/中文，"ideographic" 比 "alphabetic" 更贴近字面框顶部。
-
"hanging"在 Chrome/Firefox 中表现接近顶部，但 Safari 支持弱，慎用于关键布局 -
textBaseline影响所有后续文本操作，包括measureText()返回的actualBoundingBoxAscent等字段 - 混合中英文时，不同
textBaseline值可能导致基线错位，建议统一用"ideographic"或"middle"
measureText() 测量文字宽度为什么不准
ctx.measureText(text) 返回对象包含 width（渲染宽度）、actualBoundingBoxAscent、actualBoundingBoxDescent 等。但这些值受当前 font、textBaseline、甚至是否启用 subpixel rendering 影响，且各浏览器实现差异大。
典型问题：用 measureText("abc").width 计算换行位置，结果在 Firefox 中刚好，在 Chrome 中多出 1–2px，导致文字溢出。这是因为 width 是“逻辑宽度”，不含字距微调（kerning）和连字（ligature）的实际像素偏移。
- 仅依赖
width做布局时，务必预留 1–2px 容差，或用getBoundingClientRect()辅助验证（需将文字临时 draw 到离屏 canvas） -
actualBoundingBox*字段在旧版 Safari 中不可靠，生产环境建议降级为估算：按字号 × 字符数 × 0.6（西文）或 × 1.0（中文）粗略估算 - 测量前必须确保
font已设置且字体已加载完成，否则返回的width为 0 或极小值
文字渲染真正难的不是 API 调用，而是基线理解、字体加载时机、跨浏览器测量偏差这三块。哪怕只是居中一行字，漏掉 textBaseline 或字体加载判断，都可能在某个用户设备上完全错位。
