JavaScript Canvas中如何同时居中图片与文本并获取文本高度？

我完全理解你在Canvas里处理图文整体居中的痛点——旧浏览器不支持高级文本指标，又不想用HTML/CSS干扰Canvas渲染，还要兼顾游戏性能。下面给你两个方向的解决方案，一个是可靠兼容的文本高度获取方法，另一个是不用精确文本高度也能实现整体居中的技巧：

一、获取文本高度的兼容方案（预计算，不影响性能） #

因为游戏场景下不需要每次渲染都计算文本高度，只需要在初始化或字体变更时预计算一次即可，所以下面两种方法的性能完全可控：

1. 利用隐藏DOM元素（兼容所有浏览器） #

创建一个和Canvas字体属性完全一致的隐藏<div>，通过DOM的offsetHeight获取精确文本高度，这是最兼容且简单的方案：

function getTextHeight(fontStyle) {
  // 创建隐藏的DOM元素
  const dummyEl = document.createElement('div');
  // 用包含上下延伸字符的文本（比如Ag）覆盖绝大多数字体的高度范围
  dummyEl.textContent = 'Ag';
  // 同步Canvas的字体样式
  dummyEl.style.font = fontStyle;
  // 隐藏元素，不影响页面布局
  dummyEl.style.position = 'absolute';
  dummyEl.style.visibility = 'hidden';
  
  document.body.appendChild(dummyEl);
  const height = dummyEl.offsetHeight;
  document.body.removeChild(dummyEl);
  
  return height;
}

// 使用示例：获取当前Canvas上下文的文本高度
const currentFont = ctx.font;
const textHeight = getTextHeight(currentFont);

2. 离屏Canvas像素检测（纯Canvas实现） #

如果完全不想依赖DOM，可以用离屏Canvas渲染文本后扫描像素边界，同样只需要预计算一次：

function getTextActualHeight(ctx, targetText) {
  const offscreenCtx = document.createElement('canvas').getContext('2d');
  // 同步字体样式
  offscreenCtx.font = ctx.font;
  // 先获取文本宽度，确定离屏Canvas的宽度
  const textWidth = Math.ceil(offscreenCtx.measureText(targetText).width);
  // 先设置一个足够大的高度（基于字体大小的2倍）
  offscreenCtx.canvas.width = textWidth;
  offscreenCtx.canvas.height = Math.ceil(parseInt(ctx.font) * 2);
  
  // 在离屏Canvas上渲染文本
  offscreenCtx.textAlign = 'left';
  offscreenCtx.textBaseline = 'top';
  offscreenCtx.fillText(targetText, 0, 0);
  
  // 扫描像素找到文本的上下边界
  const imageData = offscreenCtx.getImageData(0, 0, textWidth, offscreenCtx.canvas.height);
  const pixelData = imageData.data;
  let topBoundary = offscreenCtx.canvas.height;
  let bottomBoundary = 0;
  
  for (let y = 0; y < offscreenCtx.canvas.height; y++) {
    for (let x = 0; x < textWidth; x++) {
      const pixelIndex = (y * textWidth + x) * 4;
      // 检测像素是否有透明度（即文本像素）
      if (pixelData[pixelIndex + 3] > 0) {
        topBoundary = Math.min(topBoundary, y);
        bottomBoundary = Math.max(bottomBoundary, y);
      }
    }
  }
  
  return bottomBoundary - topBoundary + 1;
}

// 使用示例：预计算目标文本的高度
const targetText = '游戏提示';
const textHeight = getTextActualHeight(ctx, targetText);

二、图文整体居中的实现 #

假设你需要图片在文本上方，两者之间有固定间距（比如10px），可以根据是否需要精确居中选择不同方案：

1. 精确居中（基于文本高度） #

用上面获取的文本高度计算整体占位，然后将整体中心对齐Canvas中心：

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = 'icon.png';
const targetText = '开始游戏';
const spacing = 10; // 图片与文本的间距

img.onload = () => {
  // 预计算文本高度
  const textHeight = getTextHeight(ctx.font);
  
  // 计算Canvas中心坐标
  const centerX = canvas.width / 2;
  const centerY = canvas.height / 2;
  
  // 计算图文整体的总高度
  const totalHeight = img.height + spacing + textHeight;
  
  // 计算图片位置：整体中心向上偏移总高度的一半
  const imgX = centerX - img.width / 2;
  const imgY = centerY - totalHeight / 2;
  
  // 计算文本位置：图片底部加间距，textBaseline设为top确保对齐
  ctx.textAlign = 'center';
  ctx.textBaseline = 'top';
  const textX = centerX;
  const textY = imgY + img.height + spacing;
  
  // 绘制元素
  ctx.drawImage(img, imgX, imgY);
  ctx.fillText(targetText, textX, textY);
};

2. 近似居中（无需精确文本高度） #

如果对精度要求不高，可以用字体大小近似文本高度，实现起来更简洁：

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = 'icon.png';
const targetText = '开始游戏';
const spacing = 10;
const fontSize = 18; // 明确设置字体大小

// 设置字体
ctx.font = `${fontSize}px Arial`;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';

img.onload = () => {
  const centerX = canvas.width / 2;
  const centerY = canvas.height / 2;
  
  // 用字体大小近似文本高度，计算整体总高度
  const totalHeight = img.height + spacing + fontSize;
  
  // 图片位置
  const imgX = centerX - img.width / 2;
  const imgY = centerY - totalHeight / 2;
  
  // 文本位置：基于middle基线，偏移字体大小的一半
  const textY = imgY + img.height + spacing + fontSize / 2;
  
  ctx.drawImage(img, imgX, imgY);
  ctx.fillText(targetText, centerX, textY);
};

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