В этой статье вы прочитаете как происходит работа с текстом в HTML Canvas в языке программирования JavaScript.
Также если вы плохо разбираетесь в canvas, то прочитаете эти статьи:
Создание текста на Canvas:
Перед тем как покажу работу с Canvas, нужно объявить этот элемент в HTML, делается это так.
1 | <canvas id="canvas" width="400" height="100"></canvas> |
Всё просто, теперь получим этот элемент в JavaScript.
1 2 3 4 | // Получаем Canvas элемент по ID let canvas = document.getElementById("canvas"); // Задаём контекст рисования let ctx = canvas.getContext('2d'); |
Тут всё просто, думаю всё понятно, если нет, то посмотрите предыдущие статьи, ссылка на которые выше.
Теперь создадим текст, это очень легко, для этого нужно знать только две вещи, параметр font, и функцию fillText().
1 2 3 4 | // Назначаем размер и шрифт текста ctx.font = "40px Tahoma"; // Пишем сам текст ctx.fillText("Hello World", 10, 50); |
Первое что делам, это назначаем значение параметру ctx.font, самом значение, это строка с параметрами шрифта, размер и какой шрифт использовать.
Потом объявляем функцию fillText(), в качестве параметров она принимает, текст, который нужно нарисовать, и позицию по X и Y, в нашем случае, текст «Hello World», и позицию по X десять пикселей и по Y пятьдесят пикселей.
Как видите всё нормально вывелось.
Примечание:
Тут стоить сказать, почему позиция по Y такая большая, если вообще без неё текст не будет виден, так как, отсчёт позиции начинаете с низу текста и что бы весь он был виден, нужен большое расстояние.
Canvas обводка текста:
Теперь перейдём к обводки текста, для этого есть функция strokeText(), которая нам поможет с этим.
1 2 3 4 5 6 7 8 | // Назначаем рахмер шрифта и сам шрифт ctx.font = "40px Tahoma"; // Пишем текста ctx.fillText("Hello World", 10, 50); // Меняем цвет для отображение ctx.strokeStyle = "green"; // Пишем точно такой же текст ctx.strokeText("Hello World", 10, 50) |
В начале всё как обычно, но потом мы меняем цвет кисти, если так можно сказать, и уже задаём объводку. Тут вы можете заметить, что параметры обводки полностью копируют параметры простого написания текста.
Это нужно, так как по сути мы не делаем обводку для текста, а просто создаём ещё один текст с обводкой, вот результат.
Как видите у текста появилась зелёная обводка, но теперь посмотрите что будет, если написание текста вообще убрать, оставить только вывод обводки.
Как видите вывелась только одна обводка, больше не чего тут нет, так всё и должно работать.
Выравнивание текста в Canvas:
Последнее что стоит рассмотреть, это то, как выравнивать текст, сначала посмотрим как выровнять по оси X, для этого нужно использовать параметр textAlign.
1 2 3 4 5 6 | // Указываем размер шрифта и сам шрифт ctx.font = "40px Tahoma"; // Указываем выравнивание по центру ctx.textAlign = "center" // Выводим текста ctx.fillText("Hello World", 200, 50); |
Тут самое интересное, что параметр X, во функции fillText() равен 200, это было сделано с толь целью, что бы выравнять текст по центру canvas элемента, а он по ширине равен 400, вот результат.
То есть суть выравнивания в том, что выравнивается относительно позиции по X, в нашем случае по центру, но если изменить позицию, то и текст тоже её изменит, хотя относительно X будет всё также по середине.
Вот все значения по которым можно выравнивать по горизонтали:
- left — текст начинается с указанной позиции
- right — текст завершается до указанной позиции
- center — текст располагается по центру относительно указанной позиции
- start — значение по умолчанию, текст начинается с указанной позиции
- end — текст завершается до указанной позиции
Теперь перейдём на выравнивание по оси Y, суть примерно в том же, но уже используется параметр textBaseline.
1 2 3 4 5 6 7 8 | // Указываем размер шрифта и сам шрифт ctx.font = "40px Tahoma"; // Указываем выравнивание по X ctx.textAlign = "center" // Указываем выравнивание по Y ctx.textBaseline = "middle"; // Пишем текст ctx.fillText("Hello World", 200, 50); |
Тут не чего не изменилось, только присваиваем параметру textBaseline, значение middle, которое выравнивает текст по середине.
Также вы можете заметить, что мы не изменили значение Y, это потому-что, высота нашего canvas блока равна 100, и что бы текст бал по его середине, надо взять среднее значение высоты, вот результат.
Как видите всё работает так, как надо, вот остальные возможные значения для textBaseline:
- top
- middle
- bottom
- alphabetic
- hanging
- ideographic
Тут я не стал объяснять, что к чему, потому что просто объяснить вряд ли получится, лучше самим попробовать и посмотреть, как и на что влияет.
Вывод:
В этой статье мы рассмотрели как происходит работа работа с текстом в canvas, тут было описано самое главное, что стоит знать для работы с ним.
Подписываетесь на соц-сети:
Оценка:
Загрузка...