CanvasRenderingContext2D: свойство textBaseline

Свойство CanvasRenderingContext2D.textBaseline API Canvas 2D задает текущую базовую линию текста, используемую при отрисовке текста.

Возможные значения:

"top"

Базовая линия текста — верхняя часть квадратного em.

"hanging"

Базовая линия текста — висящая базовая линия. (Используется для тибетских и других индийских скриптов.)

"middle"

Базовая линия текста — середина квадратного em.

"alphabetic"

Базовая линия текста — обычная буквенная базовая линия. Значение по умолчанию.

"ideographic"

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

"bottom"

Базовая линия текста — нижняя граница ограничивающего прямоугольника. Это отличается от идеографической базовой линии, так как идеографическая базовая линия не учитывает нисходящие элементы.

Значение по умолчанию — "alphabetic".

Этот пример демонстрирует различные значения свойства textBaseline.

HTML

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

JavaScript

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((baseline, index) => {
  ctx.textBaseline = baseline;
  const 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);
});

Результат

Как и в предыдущем примере, этот пример демонстрирует различные значения свойства textBaseline, но в данном случае все они выстроены горизонтально в одну строку — для лучшего понимания различий.

HTML

<canvas id="canvas" width="724" height="160"></canvas>

JavaScript

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

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

ctx.beginPath();
ctx.moveTo(0, 100);
ctx.lineTo(840, 100);
ctx.moveTo(0, 55);
ctx.stroke();

baselines.forEach((baseline, index) => {
  ctx.save();
  ctx.textBaseline = baseline;
  let x = index * 120 + 10;
  ctx.fillText("Abcdefghijk", x, 100);
  ctx.restore();
  ctx.fillText(baseline, x + 5, 50);
});

Результат

• Интерфейс, определяющий это свойство: CanvasRenderingContext2D