Разберемся со способами рисования текста на холсте canvas.
Существует два метода, позволяющие рисовать текст - один отвечает за закрашенный текст, другой только за его очертания (как и с прямоугольниками). Рассмотрим оба из них.
fillText(text, x, y [, maxWidth])
Вставляет закрашенный текст, указанный в параметре text, начиная с правого нижнего угла в координатах (x,y), так же можно указать максимальную ширину.
strokeText(text, x, y [, maxWidth])
Вставляет контуры текста, указанного в параметре text, начиная с правого нижнего угла в координатах (x,y), так же можно указать максимальную ширину.
Рассмотрим пример использования этих функции (увеличим текст, чтобы было понятнее, далее рассмотрим, как это можно сделать):
Просмотреть результат можно на демо-странице:
Изменение стиля текста
Мы уже использовали одно из свойств для изменения стиля текста - font, кроме него так же есть и другие, позволяющие изменить внешний вид рисуемого текста в canvas.
font = value
Это основной стиль, который будет использоваться для отображения текст, значение задается таким же образом, как и для CSS свойства font.
textAlign = value
Выравнивание текста по горизонтали, может принимать следующие значения: start, end, left, right или center. По умолчанию равно start.
textBaseline = value
Выравнивание текста по вертикали, может принимать следующие значения: top, hanging, middle, alphabetic, ideographic, bottom. По умолчанию равно alphabetic.
На изображении ниже, показаны отличия этих значений:
direction = value
Указывает направление текста, может принимать значения: ltr, rtl, inherit. По умолчанию равно inherit.
Давайте рассмотрим небольшой пример, в котором используем различные свойства текста:
Результаты на демо-странице: