JavaScript Canvas绘制居中文本不显示问题排查

• 检查垂直绘制坐标（y值）：
  画布文本绘制的y坐标是基线位置，不是文本顶部。如果居中文本时y值设得太小（比如等于0），文本会被画布顶部裁切。左对齐时可能用了合适的y值（比如20），但居中时没同步这个设置。示例：

  // 错误：y=0，文本基线在顶部，内容被裁掉
  ctx.fillText(state, textX, 0);
  // 正确：设置合适的基线位置，比如50
  ctx.fillText(state, textX, 50);
  

• 确认字体设置一致：
  计算文本宽度ctx.measureText(state).width时，必须保证上下文的font属性和绘制文本时完全相同。如果左对齐时用了ctx.font = "16px Arial"，但计算宽度前没设置同样的字体，得到的宽度会不准确，可能导致文本被画到画布外。
• 检查填充/描边样式：
  居中文本时如果误改了fillStyle或strokeStyle，比如设成和画布背景色一致（比如画布是白色，fillStyle也设成白色），文本会看不见。可以在绘制前显式设置样式：

  ctx.fillStyle = "#000"; // 确保文本颜色和背景有反差
  ctx.fillText(state, textX, textY);
  

• 验证画布上下文状态：
  可能在绘制前不小心修改了上下文的变换（比如translate、scale），导致实际绘制位置偏移。可以在绘制居中文本前重置上下文状态：

  ctx.save();
  // 重置变换
  ctx.setTransform(1, 0, 0, 1, 0, 0);
  // 绘制居中文字
  ctx.fillText(state, textX, textY);
  ctx.restore();
  

内容的提问来源于stack exchange，提问作者Greg