Как работать с текстом в Canvas

Метки: / / /

В этой статье вы прочитаете как происходит работа с текстом в HTML Canvas в языке программирования JavaScript.

Также если вы плохо разбираетесь в canvas, то прочитаете эти статьи:

Создание текста на Canvas:

Перед тем как покажу работу с Canvas, нужно объявить этот элемент в HTML, делается это так.

Всё просто, теперь получим этот элемент в JavaScript.

Тут всё просто, думаю всё понятно, если нет, то посмотрите предыдущие статьи, ссылка на которые выше.

Теперь создадим текст, это очень легко, для этого нужно знать только две вещи, параметр font, и функцию fillText().

Первое что делам, это назначаем значение параметру ctx.font, самом значение, это строка с параметрами шрифта, размер и какой шрифт использовать.

Потом объявляем функцию fillText(), в качестве параметров она принимает, текст, который нужно нарисовать, и позицию по X и Y, в нашем случае, текст «Hello World», и позицию по X десять пикселей и по Y пятьдесят пикселей.

Canvas работа с текстом, обычный текст

Как видите всё нормально вывелось.

Примечание:

Тут стоить сказать, почему позиция по Y такая большая, если вообще без неё текст не будет виден, так как, отсчёт позиции начинаете с низу текста и что бы весь он был виден, нужен большое расстояние.

Canvas обводка текста:

Теперь перейдём к обводки текста, для этого есть функция strokeText(), которая нам поможет с этим.

В начале всё как обычно, но потом мы меняем цвет кисти, если так можно сказать, и уже задаём объводку. Тут вы можете заметить, что параметры обводки полностью копируют параметры простого написания текста.

Это нужно, так как по сути мы не делаем обводку для текста, а просто создаём ещё один текст с обводкой, вот результат.

Работа обвотка текста на canvas.js

Как видите у текста появилась  зелёная обводка, но теперь посмотрите что будет, если написание текста вообще убрать, оставить только вывод обводки.

Обводка текста без текста в canvas

Как видите вывелась только одна обводка, больше не чего тут нет, так всё и должно работать.

Выравнивание текста в Canvas:

Последнее что стоит рассмотреть, это то, как выравнивать текст, сначала посмотрим как выровнять по оси X, для этого нужно использовать параметр textAlign.

Тут самое интересное, что параметр X, во функции  fillText() равен 200, это было сделано с толь целью, что бы выравнять текст по центру canvas элемента, а он по ширине равен 400, вот результат.

Выравнивание текста по центру

То есть суть выравнивания в том, что выравнивается относительно позиции по X, в нашем случае по центру, но если изменить позицию, то и текст тоже её изменит, хотя относительно X будет всё также по середине.

Вот все значения по которым можно выравнивать по горизонтали:

  • left — текст начинается с указанной позиции
  • right — текст завершается до указанной позиции
  • center — текст располагается по центру относительно указанной позиции
  • start — значение по умолчанию, текст начинается с указанной позиции
  • end — текст завершается до указанной позиции

Теперь перейдём на выравнивание по оси Y, суть примерно в том же, но уже используется параметр textBaseline.

Тут не чего не изменилось, только присваиваем параметру textBaseline, значение middle, которое выравнивает текст по середине.

Также вы можете заметить, что мы не изменили значение Y, это потому-что, высота нашего canvas блока равна 100, и что бы текст бал по его середине, надо взять среднее значение высоты, вот результат.

Выравнивания текста в canvas js

Как видите всё работает так, как надо, вот остальные возможные значения для textBaseline:

  • top
  • middle
  • bottom
  • alphabetic
  • hanging
  • ideographic

Тут я не стал объяснять, что к чему, потому что просто объяснить вряд ли получится, лучше самим попробовать и посмотреть, как и на что влияет.

Вывод:

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

Подписываетесь на соц-сети:

Оценка:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
(Пока оценок нет)
Загрузка...

Поделится:

Также рекомендую:

55058653