如何在 HTML Canvas 中精确居中绘制文本

如何在 HTML Canvas 中精确居中绘制文本

本文详解使用 Ja vaScript 在 Canvas 上水平居中绘制文本的正确方法，涵盖坐标计算、measureText() 使用要点、常见拼写错误规避及完整可运行示例。

想在 Canvas 画布上把文字摆得端端正正，水平居中是最基本也最常遇到的需求。说起来原理不复杂：量一下文本有多宽，然后从画布的中心点往回退一半宽度，就是起笔的位置。 可偏偏就是这个简单的“量体裁衣”过程，新手一不留神就会踩坑——变量名写错、上下文对象没找对、或者忘了给文字“定个样式”，都可能导致渲染失败。

下面这个方案，可以说是把 robustness（健壮性）拉满了，直接拿去用就行：

代码摆在这儿了，但知其然更要知其所以然。下面这几个“坑”，可以说是新手必遇套餐：

常见错误与注意事项

• 变量名拼写错误：最经典的错误就是把 `centreX` 写成了 `centerX`（英式 vs 美式拼写）。结果 `textX` 计算出来是 `NaN`，文字自然就“隐身”了。
• 上下文对象错误：`measureText()` 这个方法必须由 Canvas 的上下文对象（也就是 `ctx`）来调用。如果手滑写成了 `ctxO` 或者其他未定义的变量，程序直接就报停了。
• 字体未设置：虽然不设置字体，`measureText()` 也能基于默认值（通常是 10px sans-serif）返回一个宽度，但这个宽度和你实际用 `24px Arial` 渲染出来的宽度很可能不一样。所以，显式声明字体是必须的。
• textAlign 的干扰：其实有个更省事的办法，就是把 `ctx.textAlign` 设为 `‘center’`。这样在调用 `fillText` 时，直接传入中心点坐标，文字就会自动居中。但要注意，这个设置是全局的，会影响之后所有的文本绘制，用完了记得按需重置。
• Y 坐标的理解偏差：`fillText(text, x, y)` 里的 `y`，指的是文字基线的位置，不是文字的顶部。如果想实现“视觉上的垂直居中”，需要结合 `textBaseline` 属性和字体度量信息进行手动微调，这又是另一个话题了。

进阶技巧（推荐）

说到更简洁的方法，刚才提了一嘴的 `textAlign = ‘center’` 必须拥有姓名。用上它，代码瞬间清爽：

function drawStateTextCentreV2(state) {
  ctx.textAlign = 'center'; // ← 核心：切换到居中对齐模式
  ctx.fillText(`${state + 1}`, centreX, 30);
  ctx.textAlign = 'left'; // ← 好习惯：绘制完恢复默认左对齐，不影响后续操作
}

说到底，在 Canvas 里居中文本，就是一道“数学计算”加“状态管理”的组合题。只要确保变量名写对、上下文对象有效、字体样式明确，并且真正理解 `x` 和 `y` 坐标的含义，实现精准居中就是水到渠成的事。

想在前端路上走得更远？立即学习“前端免费学习笔记（深入）”，夯实你的基础。