将文本放在另一个文本下方，并将其右对齐

Question

让我们看一下我的canvas代码（在canvas库中，但与html5 canvas API几乎相同）

const canvas = createCanvas(600, 316);
const ctx = canvas.getContext('2d');

const codeName = 'Some String Here';

const image = await loadImage(...);

ctx.drawImage(image, 0, 0);

ctx.font = 'bold 30px Sans serif';
ctx.fillStyle = '#d75c5c';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
const titleX = canvas.width / 2;
const titleY = canvas.height / 2;
ctx.fillText(codeName, titleX, titleY);

此代码会生成如下图像：

现在，如何在“Some String Here”下方添加另一个文本，使其向右对齐，而不超过“Some String Here”文本的宽度？这就是我想要的样子：

如果底部文本变成多行，如果它超过“Some String Here”文本的 70% 以上，那就太好了。

这是我尝试过的：

const authorText = `Bottom String`
ctx.font = '20px Sans serif';
ctx.fillStyle = '#494949';
ctx.textAlign = 'right';
ctx.textBaseline = 'top';

const titleTextWidth = ctx.measureText(codeName).width;
const titleTextHeight = ctx.measureText(codeName).actualBoundingBoxAscent;
const spacing = 15;

const authorX = titleX + titleTextWidth;
const authorY = titleY + titleTextHeight + spacing;
ctx.fillText(authorText, authorX, authorY);

但是，这有一些奇怪的怪癖，底部文本会稍微向右弹出：

Answer 1

您的代码有两个问题：

• 在更改文本相关属性以绘制第二个文本之前，您应该调用

  ctx.measureText

  。

• 计算

  authorX

  时，您使用的是

  titleX

  ，它不对应于文本的左侧，而是对应于文本的中心（因为它使用的是

  textAlign = 'center'

  。

修复方法如下：

const canvas = document.getElementById('canvas')

canvas.width = document.body.offsetWidth;
canvas.height = document.body.offsetHeight;

const ctx = canvas.getContext('2d');

const codeName = 'Some String Here';
ctx.font = 'bold 30px Sans serif';
ctx.fillStyle = '#d75c5c';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';

const titleX = canvas.width / 2;
const titleY = canvas.height / 2;

ctx.fillText(codeName, titleX, titleY);

// Measure before changing the text properties:
const titleTextWidth = ctx.measureText(codeName).width;
const titleTextHeight = ctx.measureText(codeName).actualBoundingBoxAscent;

const authorText = 'Bottom String'
ctx.font = '20px Sans serif';
ctx.fillStyle = '#494949';
ctx.textAlign = 'right';
ctx.textBaseline = 'top';

const spacing = 15;

// Properly calculated x:
const authorX = canvas.width - (canvas.width - titleTextWidth) / 2;
const authorY = titleY + titleTextHeight + spacing;

ctx.fillText(authorText, authorX, authorY);

html,
body {
  margin: 0;
  height:100%;
}

#canvas {
  position:absolute;
  width: 100%;
  height :100%;
}

<canvas id="canvas"></canvas>