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

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

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

在 HTML Canvas 中实现文本水平居中，核心思路是：获取文本渲染宽度 → 计算起始横坐标 = 画布中心 X 坐标 − 文本宽度 ÷ 2 → 调用 fillText() 绘制。这看似简单，但实践中极易因变量名错误、上下文缺失或未设置字体样式而失败。

以下为完整、健壮的实现方案：

<canvas id="sketch" width="390" height="844"></canvas><script>  const cnv = document.getElementById('sketch');  const ctx = cnv.getContext('2d');  // ✅ 正确获取画布中心坐标  const centreX = cnv.width / 2;  const centreY = cnv.height / 2;  // ⚠️ 关键：必须显式设置字体，否则 measureText 行为不可靠（默认为 10px sans-serif，但不同浏览器可能有差异）  ctx.font = '24px Arial, sans-serif';  ctx.textAlign = 'left'; // 默认值，可省略；但明确设置更清晰  ctx.textBaseline = 'alphabetic'; // 默认值，推荐保留以确保纵向一致性  function drawStateTextCentre(state) {    const text = `${state + 1}`;    // ✅ 使用正确的上下文 ctx（非拼写错误的 ctxO 或 centerX）    const textWidth = ctx.measureText(text).width;    // ✅ 使用 centreX（注意大小写：centreX ≠ centerX）    const textX = centreX - textWidth / 2;    // ✅ Y 坐标需考虑基线位置；若希望视觉垂直居中，可使用 centreY ± 偏移量    const textY = 30; // 示例：距顶部 30px；如需垂直居中，可用 centreY + (ctx.font size * 0.35) 近似调整    ctx.fillText(text, textX, textY);  }  // 示例调用  drawStateTextCentre(1); // 渲染 "2" 并水平居中于画布顶部区域</script>

⚠️ 常见错误与注意事项：

• 变量名拼写错误：原文中误将 centreX 写成 centerX（英式 centre vs 美式 center），导致 textX 计算为 NaN，文本不显示；
• 上下文对象错误：measureText() 必须调用自 CanvasRenderingContext2D 实例（即 ctx），而非未定义变量（如 ctxO）；
• 字体未设置：measureText() 的结果依赖 ctx.font 当前值。若未设置，虽有默认值，但宽度测量可能与实际渲染不一致，建议显式声明；
• textAlign 干扰：ctx.textAlign = 'center' 可替代手动计算 textX（此时 fillText(text, centreX, y) 即可居中），但需注意它会影响后续所有文本绘制，建议按需重置；
• Y 坐标理解：fillText(text, x, y) 的 y 是文字基线（baseline）位置，不是顶部。若需“视觉垂直居中”，需结合 textBaseline 和字体度量微调。

✅ 进阶技巧（推荐）：
启用 ctx.textAlign = 'center' 后，直接传入中心横坐标即可，代码更简洁且不易出错：

function drawStateTextCentreV2(state) {  ctx.textAlign = 'center'; // ← 关键：设为居中对齐模式  ctx.fillText(`${state + 1}`, centreX, 30);  ctx.textAlign = 'left'; // ← 可选：恢复默认，避免影响其他绘制}

综上，Canvas 文本居中本质是数学计算与上下文状态管理的结合。只要确保变量名准确、上下文有效、字体明确，并理解 x/y 坐标语义，即可稳定实现精准居中效果。

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