TextMetrics

Интерфейс TextMetrics представляет собой размеры фрагмента текста на холсте; экземпляр TextMetrics можно получить с помощью метода CanvasRenderingContext2D.measureText().

TextMetrics.width Только для чтения

Возвращает ширину фрагмента инлайнового текста в пикселях CSS. Учитывает текущий шрифт контекста.

TextMetrics.actualBoundingBoxLeft Только для чтения

Расстояние параллельно базовой линии от точки выравнивания, заданной свойством CanvasRenderingContext2D.textAlign, до левой стороны ограничивающего прямоугольника данного текста в пикселях CSS; положительные значения указывают на расстояние влево от заданной точки выравнивания.

TextMetrics.actualBoundingBoxRight Только для чтения

Возвращает расстояние от точки выравнивания, заданной свойством CanvasRenderingContext2D.textAlign, до правой стороны ограничивающего прямоугольника данного текста в пикселях CSS. Расстояние измеряется параллельно базовой линии.

TextMetrics.fontBoundingBoxAscent Только для чтения

Возвращает расстояние от горизонтальной линии, указанной атрибутом CanvasRenderingContext2D.textBaseline, до верхней части самого большого ограничивающего прямоугольника всех шрифтов, используемых для рендеринга текста, в пикселях CSS.

TextMetrics.fontBoundingBoxDescent Только для чтения

Возвращает расстояние от горизонтальной линии, указанной атрибутом CanvasRenderingContext2D.textBaseline, до нижней части ограничивающего прямоугольника всех шрифтов, используемых для рендеринга текста, в пикселях CSS.

TextMetrics.actualBoundingBoxAscent Только для чтения

Возвращает расстояние от горизонтальной линии, указанной атрибутом CanvasRenderingContext2D.textBaseline, до верхней части ограничивающего прямоугольника, используемого для рендеринга текста, в пикселях CSS.

TextMetrics.actualBoundingBoxDescent Только для чтения

Возвращает расстояние от горизонтальной линии, указанной атрибутом CanvasRenderingContext2D.textBaseline, до нижней части ограничивающего прямоугольника, используемого для рендеринга текста, в пикселях CSS.

TextMetrics.emHeightAscent Только для чтения

Возвращает расстояние от горизонтальной линии, указанной свойством CanvasRenderingContext2D.textBaseline, до верхней части квадрата em в блоке строки в пикселях CSS.

TextMetrics.emHeightDescent Только для чтения

Возвращает расстояние от горизонтальной линии, указанной свойством CanvasRenderingContext2D.textBaseline, до нижней части квадрата em в блоке строки в пикселях CSS.

TextMetrics.hangingBaseline Только для чтения

Возвращает расстояние от горизонтальной линии, указанной свойством CanvasRenderingContext2D.textBaseline, до висящей базовой линии блока строки в пикселях CSS.

TextMetrics.alphabeticBaseline Только для чтения

Возвращает расстояние от горизонтальной линии, указанной свойством CanvasRenderingContext2D.textBaseline, до алфавитной базовой линии блока строки в пикселях CSS.

TextMetrics.ideographicBaseline Только для чтения

Возвращает расстояние от горизонтальной линии, указанной свойством CanvasRenderingContext2D.textBaseline, до иероглифической базовой линии блока строки в пикселях CSS.

Этот пример демонстрирует базовые линии, которые содержит объект TextMetrics. Базовая линия по умолчанию — alphabeticBaseline. См. также свойство CanvasRenderingContext2D.textBaseline.

HTML

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

JavaScript

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

const baselinesAboveAlphabetic = [
  "fontBoundingBoxAscent",
  "actualBoundingBoxAscent",
  "emHeightAscent",
  "hangingBaseline",
];
const baselinesBelowAlphabetic = [
  "ideographicBaseline",
  "emHeightDescent",
  "actualBoundingBoxDescent",
  "fontBoundingBoxDescent",
];
const baselines = [...baselinesAboveAlphabetic, ...baselinesBelowAlphabetic];
ctx.font = "25px serif";
ctx.strokeStyle = "red";

baselines.forEach((baseline, index) => {
  const text = `Abcdefghijklmnop (${baseline})`;
  const textMetrics = ctx.measureText(text);
  const y = 50 + index * 50;
  ctx.beginPath();
  ctx.fillText(text, 0, y);

  const baselineMetricValue = textMetrics[baseline];
  if (baselineMetricValue === undefined) {
    return;
  }

  const lineY = baselinesBelowAlphabetic.includes(baseline)
    ? y + Math.abs(baselineMetricValue)
    : y - Math.abs(baselineMetricValue);
  ctx.moveTo(0, lineY);
  ctx.lineTo(550, lineY);
  ctx.stroke();
});

Результат

При измерении направления x фрагмента текста сумма actualBoundingBoxLeft и actualBoundingBoxRight может быть шире, чем ширина инлайнового блока (width), из-за наклонных/курсивных шрифтов, где символы выступают за пределы своей ширины продвижения.

Поэтому для получения более точного значения абсолютной ширины текста полезно использовать сумму actualBoundingBoxLeft и actualBoundingBoxRight.

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const text = "Abcdefghijklmnop";
ctx.font = "italic 50px serif";
const textMetrics = ctx.measureText(text);

console.log(textMetrics.width);
// 459.8833312988281

console.log(
  textMetrics.actualBoundingBoxRight + textMetrics.actualBoundingBoxLeft,
);
// 462.8833333333333

• Метод Creator в CanvasRenderingContext2D
• Элемент <canvas> и связанный интерфейс HTMLCanvasElement