html5canvas怎么添加文字_文本渲染与样式设置详解【教程】

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 或字体加载判断，都可能在某个用户设备上完全错位。