Рисование текста

После того, как мы увидели в предыдущей главе, как применять стили и цвета, взглянем на написание текста в canvas.

Рисование текста

Контекст рендеринга canvas предоставляет два метода для рисования текста:

fillText(text, x, y [, maxWidth])

Вставляет заданный текст в положении (x,y). Опционально может быть указана максимальная ширина.

strokeText(text, x, y [, maxWidth])

Вставляет контур заданного текста в положении (x,y). Опционально может быть указана максимальная ширина.

Пример fillText

Текст вставлен с использованием текущего fillStyle.

js
function draw() {
  var ctx = document.getElementById("canvas").getContext("2d");
  ctx.font = "48px serif";
  ctx.fillText("Hello world", 10, 50);
}

Пример strokeText

Текст вставлен с использованием текущего strokeStyle.

js
function draw() {
  var ctx = document.getElementById("canvas").getContext("2d");
  ctx.font = "48px serif";
  ctx.strokeText("Hello world", 10, 50);
}

Стилизация текста

В примерах выше мы уже использовали свойство font для изменения размера текста. Кроме него существуют ещё несколько свойств, позволяющие настроить вывод текста на canvas:

font = value

Это основной стиль, который будет использоваться для вывода текста. Строка имеет такой же синтаксис, как CSS-свойство font. По умолчанию - sans-serif высотой 10px.

textAlign = value

Настройка выравнивания текста. Возможные значения: start, end, left, right или center. По умолчанию - start.

textBaseline = value

Настройка выравнивания текста по вертикали. Возможные значения: top, hanging, middle, alphabetic, ideographic, bottom. По умолчанию - alphabetic.

direction = value

Направление текста. Возможные значения: ltr, rtl, inherit. По умолчанию - inherit.

Эти свойства могут быть вам знакомы если вы работали с CSS.

Изображение от WHATWG ниже показывает различные варианты свойства textBaseline. The top of the em square is
roughly at the top of the glyphs in a font, the hanging baseline is
where some glyphs like आ are anchored, the middle is half-way
between the top of the em square and the bottom of the em square,
the alphabetic baseline is where characters like Á, ÿ,
f, and Ω are anchored, the ideographic baseline is
where glyphs like 私 and 達 are anchored, and the bottom
of the em square is roughly at the bottom of the glyphs in a
font. The top and bottom of the bounding box can be far from these
baselines, due to glyphs extending far outside the em square.

Пример textBaseline

Редактируя код ниже, вы можете видеть, как меняется отображение текста на canvas в реальном времени:

js
ctx.font = "48px serif";
ctx.textBaseline = "hanging";
ctx.strokeText("Hello world!", 0, 100);

Измерение ширины текста

Для измерения ширины текста (без рисования его на canvas) можно воспользоваться следующим методом:

measureText()

Возвращает объект TextMetrics, содержащий ширину текста в пикселах, до отрисовки на canvas.

Пример ниже показывает, как можно измерить ширину текста.

js
function draw() {
  var ctx = document.getElementById("canvas").getContext("2d");
  var text = ctx.measureText("foo"); // TextMetrics object
  text.width; // 16;
}

Примечания

В ранних версиях Gecko (движок рендеринга в Firefox, Firefox OS и других приложениях Mozilla) были реализованы методы API с префиксами для рисования текста на canvas. На данный момент они устарели и уже, возможно, удалены, поэтому их правильная работа не гарантируется.