如何在JavaScript Canvas中实现文本两端对齐？求解决方案

Canvas 2D API 原生确实不支持文本两端对齐（textAlign没有full/justify选项），下面是手动实现的可行方案，核心思路是拆分文本后手动分配单词间距：

核心实现函数 #

function drawJustifiedText(context, text, x, y, maxWidth) {
  const words = text.split(' ');
  // 只有单个单词时直接左对齐绘制
  if (words.length === 1) {
    context.fillText(words[0], x, y);
    return;
  }

  // 计算所有单词的总宽度
  let totalWordsWidth = 0;
  words.forEach(word => {
    totalWordsWidth += context.measureText(word).width;
  });

  // 计算需要分配的额外间距（总空白空间 / 单词间隙数）
  const gaps = words.length - 1;
  const extraSpace = maxWidth - totalWordsWidth;
  const spacePerGap = extraSpace / gaps;

  // 逐个绘制单词，每个单词后加上额外间距
  let currentX = x;
  words.forEach((word, index) => {
    context.fillText(word, currentX, y);
    if (index !== words.length - 1) {
      currentX += context.measureText(word).width + spacePerGap;
    }
  });
}

结合你的代码使用示例 #

把原来的fillText替换成上面的函数即可，示例如下：

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var img = new Image();
img.onload = function () {
  context.drawImage(img, 0, 0);
  context.font = "18px sans-serif";
  // 绘制两端对齐文本：上下文、文本、起始x、起始y、目标宽度
  drawJustifiedText(context, "The Text That Needs Justification", 50, 50, 300);
};
img.src = imagePath; // 替换为真实图片URL或URI

补充说明 #

• 上述函数是单行文本的两端对齐实现，如果需要处理多行，可先按换行符拆分文本，逐行调用该函数并调整y坐标偏移
• 如果文本包含连续空格或特殊标点，建议先做预处理（比如合并连续空格），避免间距计算出错
• 可以扩展逻辑让最后一行保持左对齐，更贴近常规文档的两端对齐规则

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