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

• Предыдущая
• Следующая

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

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

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

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

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

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

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

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

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

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

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

font = value

Текущий стиль текста, используемый при отрисовке. Эта строка использует тот же синтаксис, что и свойство CSS font. По умолчанию шрифт — 10px sans-serif.

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.

Измените код ниже, и изменения будут отображаться в реальном времени на холсте:

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

measureText()

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

Следующий фрагмент кода показывает, как можно измерить текст и получить его ширину.

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

Элемент <canvas> — это просто растровое изображение и не содержит информации об отрисованных объектах. Написанный на холсте текст может вызывать проблемы с читаемостью для пользователей, которые используют увеличение экрана. Пиксели внутри элемента холста не масштабируются и могут становиться размытыми при увеличении. Это связано с тем, что они представляют собой не вектор, а набор пикселей в виде букв. При увеличении пиксели становятся больше.

Содержимое холста недоступно для инструментов доступности, как это есть в семантическом HTML. В общем, следует избегать использования холста на доступном веб-сайте или приложении. В качестве альтернативы используйте элементы HTML или SVG вместо холста.

• Предыдущая
• Следующая