尝试在画布中垂直对齐文本时，`context.textBaseline = 'middle'` 不起作用

Question

为什么在我的简单示例中 textBaseline = 'middle' 不起作用？为什么我的文字移到顶部？

  const size = 100;
  const canvas = document.getElementById('canvas');
  
  canvas.width = size;
  canvas.height = size;
  
  const context = canvas.getContext('2d');

  context.font = "bold " + (size * 0.95) + "px Arial";
  context.fillStyle = 'blue';
  context.textAlign = "center";
  context.textBaseline = 'middle';

  context.fillText('SO', size / 2, size / 2);

canvas {
  border: 1px solid red;
}

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

Answer 1

我假设您想在画布中垂直对齐文本

.canvas 中的对齐完全基于 x 和 y 值。 textBaseline 只会在 y 坐标附近对齐 position specified 中的文本。

运行这个sn-p来理解

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

const baselines = ['top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom'];
ctx.font = '36px serif';
ctx.strokeStyle = 'red';

baselines.forEach(function (baseline, index) {
  ctx.textBaseline = baseline;
  let y = 75 + index * 75;
  ctx.beginPath();
  ctx.moveTo(0, y + 0.5);
  ctx.lineTo(550, y + 0.5);
  ctx.stroke();
  ctx.fillText('Abcdefghijklmnop (' + baseline + ')', 0, y);
});

<canvas id="canvas" width="550" height="500"></canvas>

Reference

Answer 2

好的，在弄清楚大写高度是多少之后，我设法找到了一个适合我需要的解决方案（在画布中垂直居中大写字符）。我使用此tool 计算了帽高比。

const size = 100;
const canvas = document.getElementById('canvas');
canvas.width = canvas.height = size;
const context = canvas.getContext('2d');

context.font = "bold " + (size) + "px Arial";
context.fillStyle = 'blue';
context.textAlign = "center";
context.textBaseline = 'hanging';
const capHeightRatio = 0.72; // for Arail
context.fillText('SO', size / 2, (size - (size * capHeightRatio)) / 2);

canvas {
  border: 1px solid red;
}

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