如何在 HTML Canvas 中实现文本居中绘制

本文详解如何使用 javascript 的 canvas 2d api 精确实现文本水平居中，重点解决因变量名错误、坐标计算偏差或上下文误用导致的文本不可见问题，并提供可直接运行的完整示例。

本文详解如何使用 javascript 的 canvas 2d api 精确实现文本水平居中，重点解决因变量名错误、坐标计算偏差或上下文误用导致的文本不可见问题，并提供可直接运行的完整示例。

在 HTML Canvas 中居中绘制文本看似简单，实则需同时兼顾文本度量精度与坐标定位逻辑。核心原理是：获取文本渲染宽度，再将绘制起点（x 坐标）设为 canvas中心X - 文本宽度/2。但实践中常见几类隐蔽错误——如变量名拼写错误、未正确设置字体样式、或忽略 fillText() 的 y 坐标基准线（以文字基线为准，非顶部）。

以下为正确、健壮的居中绘制方案：

✅ 正确实现步骤

1. 获取 canvas 及 2D 上下文

   const cnv = document.getElementById('sketch');const ctx = cnv.getContext('2d');const centreX = cnv.width / 2;const centreY = cnv.height / 2;

2. 统一设置字体（强烈推荐）
   字体未显式声明时，measureText() 可能返回不一致的宽度（因浏览器默认字体差异）：

   ctx.font = '16px sans-serif'; // 必须与实际绘制字体一致

3. 居中绘制函数（修正版）

   立即学习“前端免费学习笔记（深入）”；

   function drawStateTextCentre(state) {    const text = `${state + 1}`;    // ✅ 关键：使用正确的上下文 ctx（非拼写错误的 ctxO 或 centerX）    const textWidth = ctx.measureText(text).width;    const textX = centreX - textWidth / 2; // 水平居中 x 坐标    const textY = 30; // 注意：y 是基线位置，非文字顶部；如需垂直居中，可用 centreY ± 行高偏移    ctx.fillText(text, textX, textY);}

⚠️ 常见错误排查清单

• ❌ ctxO 或 centerX（应为 centreX）等拼写错误 → 导致 NaN 或 undefined，fillText 失效
• ❌ 未设置 ctx.font → measureText() 返回宽度不可靠，且实际渲染字体可能过小/不可见
• ❌ y 坐标过小（如 y = 0）→ 文字被裁剪出画布上方；建议 y ≥ 16（对 16px 字体）确保可见
• ❌ 忘记调用 drawStateTextCentre() 或未在 requestAnimationFrame/draw() 循环中触发

? 完整可运行示例

<canvas id="sketch" width="390" height="844" style="border:1px solid #ccc;"></canvas><script>  const cnv = document.getElementById('sketch');  const ctx = cnv.getContext('2d');  const centreX = cnv.width / 2;  const centreY = cnv.height / 2;  ctx.font = '20px Arial, sans-serif';  ctx.textAlign = 'center'; // ✨ 进阶技巧：启用 textAlign 可简化代码  ctx.textBaseline = 'middle'; // 垂直居中基线  function drawStateTextCentre(state) {    const text = `${state + 1}`;    // 方式1：手动计算（兼容所有场景）    // const width = ctx.measureText(text).width;    // ctx.fillText(text, centreX - width/2, 50);    // 方式2：利用 textAlign + textBaseline（更简洁，推荐）    ctx.fillText(text, centreX, 50); // x 自动居中，y 为基线位置  }  drawStateTextCentre(1); // 输出 "2" 居中显示</script>

? 进阶提示：通过设置 ctx.textAlign = 'center' 和 ctx.textBaseline = 'middle'，可彻底避免手动计算宽度——此时 fillText(text, centreX, centreY) 即实现完全居中（水平+垂直），大幅提升代码可读性与鲁棒性。

掌握这一模式后，无论是动态数字、标题还是游戏 UI 文本，都能精准、稳定地实现 Canvas 居中渲染。