HTML5 Canvas文本定位异常求助：预期居中却偏移

看起来你混淆了Canvas外部文本元素的CSS定位和Canvas内部文本绘制的坐标逻辑，这两种场景的居中方式完全不同，我来帮你拆解问题：

场景1：你用独立文本元素（如<div>）叠加在Canvas上方 #

如果是这种情况，你遇到的是CSS绝对定位的垂直对齐问题：

• position: absolute; top: 320px 是让文本元素的顶部边缘距离Canvas顶部320px，但Canvas的垂直中点是320px（640/2），这时候文本的中心会在320px + 文本高度/2的位置，自然会偏下。
• 你用top:140px看起来居中，是因为这个值刚好抵消了文本自身高度的一半（比如文本总高度是360px的话，140 + 360/2 = 320，刚好命中中点）。

正确的CSS居中方案：让文本元素的中心对齐到Canvas中点，用transform来实现：

.text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 可选：添加字体样式 */
  font-size: 24px;
  font-family: Arial;
}

这个方法不需要计算文本高度，不管字体大小怎么变，都能精准居中。

场景2：你用Canvas API（fillText）在画布内部绘制文本 #

如果是这种情况，问题出在Canvas文本的基线默认值：
Canvas绘制文本时，textBaseline的默认值是alphabetic（字母基线），也就是你传入的y坐标是文本基线的位置，不是文本的中心。所以当你把y设为320px时，文本的基线在中点，但文本本身会向上和向下延伸，视觉上就会偏下。

正确的JS居中方案：

方法1：直接修改文本基线 #

const canvas = document.getElementById('your-canvas');
const ctx = canvas.getContext('2d');

ctx.font = '24px Arial';
ctx.textBaseline = 'middle'; // 将基线设为文本垂直中点
ctx.textAlign = 'center'; // 水平居中
ctx.fillText('你的文本内容', canvas.width / 2, canvas.height / 2);

方法2：手动计算文本偏移量（适用于需要精确控制的场景） #

const canvas = document.getElementById('your-canvas');
const ctx = canvas.getContext('2d');
const text = '你的文本内容';

ctx.font = '24px Arial';
const textMetrics = ctx.measureText(text);
// 获取文本实际高度（上升部分+下降部分）
const textHeight = textMetrics.actualBoundingBoxAscent + textMetrics.actualBoundingBoxDescent;

// 计算居中坐标
const x = canvas.width / 2 - textMetrics.width / 2;
const y = canvas.height / 2 + textHeight / 2;

ctx.fillText(text, x, y);

是否需要改用JS？ #

• 如果是叠加在Canvas上的独立文本元素：用CSS就能完美解决，不需要JS。
• 如果是直接在Canvas内部绘制文本：必须用JS（Canvas API）来控制位置，CSS无法影响Canvas内部的绘制内容。

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