本文详解在 javascript 中使用 canvas api 居中绘制文本的正确方法，包括水平居中的核心原理、关键代码实现、常见错误排查（如变量名拼写错误）及完整可运行示例。
本文详解在 javascript 中使用 canvas api 居中绘制文本的正确方法，包括水平居中的核心原理、关键代码实现、常见错误排查（如变量名拼写错误）及完整可运行示例。
在 HTML Canvas 中实现文本水平居中，本质是将文本的基线起始点（baseline origin） 水平偏移至画布中心位置。Canvas 的 fillText() 方法默认以文本左边缘为锚点绘制，因此不能直接传入 centreX 作为 x 坐标，而需先测量文本宽度，再计算其左对齐坐标：x = centreX - textWidth / 2。
以下为完整、健壮的居中绘制实现：
<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;
let state = 1;
// ✅ 正确实现：水平居中绘制
function drawStateTextCentre(state) {
const text = `${state + 1}`;
const textMetrics = ctx.measureText(text); // 获取文本度量信息
const textWidth = textMetrics.width;
const textX = centreX - textWidth / 2; // 关键：从中心向左偏移半个文本宽
ctx.fillText(text, textX, 30); // y 值 30 表示基线位置（非顶部）
}
// ? 补充：若需垂直居中（如居中于画布中央），可结合 font 和 lineHeight 调整 y：
function drawStateTextCentreBoth(state) {
const text = `${state + 1}`;
const textMetrics = ctx.measureText(text);
const textWidth = textMetrics.width;
// 垂直方向：需考虑字体大小与基线偏移（approx. 0.8 × fontSize 是常用经验系数）
const fontSize = 16;
ctx.font = `${fontSize}px sans-serif`;
const textX = centreX - textWidth / 2;
const textY = centreY + fontSize * 0.35; // 基线大致位于字符中下部
ctx.fillText(text, textX, textY);
}
drawStateTextCentre(state);
</script>
⚠️ 常见错误与注意事项：
- 变量名拼写错误：原问题中误写为 centerX（美式）但声明为 centreX（英式），且函数内使用了未定义的 centerX —— JavaScript 区分大小写与拼写，会导致 ReferenceError 或 NaN，使文本不显示；
- 上下文对象误用：measureText() 必须调用 ctx.measureText()，而非其他未定义对象（如 ctxO）；
- 字体设置影响测量：measureText() 的结果依赖当前 ctx.font 设置。若未显式设置字体，浏览器使用默认值（通常为 10px sans-serif），可能导致测量与渲染不一致。建议在调用前统一设置 ctx.font；
- y 坐标理解误区：Canvas 的 y 坐标指向文本基线（baseline），而非顶部。若需视觉上垂直居中，不可直接使用 centreY，而应结合 fontSize 与基线偏移比例（约 0.3–0.4 × fontSize）调整。
✅ 最佳实践总结：
- 始终先设置 ctx.font，再调用 measureText()；
- 使用 const 声明变量并确保拼写与作用域完全一致；
- 对于动态内容，每次绘制前重新测量文本宽度（因不同字符串宽度差异显著）；
- 需要精确垂直居中时，推荐使用 ctx.textAlign = 'center' 与 ctx.textBaseline = 'middle' 配合 fillText(text, centreX, centreY) —— 这是最简洁可靠的双轴居中方案（见下文扩展）：
// ? 更优雅的双轴居中写法（推荐）
ctx.font = '16px sans-serif';
ctx.textAlign = 'center'; // x 锚点设为文本中心
ctx.textBaseline = 'middle'; // y 锚点设为文本中线
ctx.fillText(`${state + 1}`, centreX, centreY);
该方式无需手动计算宽度与偏移，语义清晰、容错性强，是 Canvas 文本居中的标准范式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
