Как написать текст в canvas

Содержание
  1. Как работать с текстом в Canvas
  2. Создание текста на Canvas:
  3. Примечание:
  4. Canvas обводка текста:
  5. Выравнивание текста в Canvas:
  6. Тексты в Canva и русские шрифты
  7. Как добавить текст в Canva в ваш макет
  8. Встроенные шаблоны текста в Канве
  9. Вставка текста без шаблонов Канвы
  10. Русские шрифты в Canva
  11. Как добавить шрифты в Canva
  12. Изменение размера текста в Канва
  13. Выравнивание текста в Канве и использование заглавных букв
  14. Интервалы в тексте межбуквенный и между строк
  15. Как сблизить строчки текста между собой
  16. Копирование, прозрачность, перенос текста в Канве на слой ниже
  17. Почему в Canva не меняется шрифт
  18. Как сделать подложку под текст в канве
  19. Вариант 1. Как в Canva сделать фон текста однотонным
  20. Вариант 2. Фотография в качестве фона
  21. Вариант 3. Фигурный фон под текстом
  22. Вариант 4. Градиент в качестве подложки под текст
  23. Вариант 5. Видео в качестве фона для текста.
  24. Советы по работе с текстами
  25. Как мы учились рисовать тексты на Canvas
  26. Переезд с Flash
  27. Особенности работы SVG foreignObject
  28. Почему мы отказались от foreignObject
  29. Создаём прототип
  30. Успех длился 30 минут
  31. CanvasText версия 0.2
  32. Что такое CanvasText?
  33. Простое сравнение
  34. С использованием CanvasText
  35. Преимущества:
  36. БЕЗ CanvasText
  37. Недостатки:
  38. Описание
  39. Содержание
  40. 1. Установка
  41. 2. Запускаем!
  42. 2.1. Устанвливаем основную конфигурацию
  43. 2.2. Пишем текст: встроенные стили
  44. 2.2.1. Доступные свойства для встроенных стилей
  45. 2.2.2. Создание классов
  46. 2.2.3. Доступные свойства классов
  47. 2.2.4. Вставка новой строки
  48. 3. Система кэширования

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

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

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

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

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

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

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

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

Примечание:

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

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

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

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

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

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

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

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

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

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

Источник

Тексты в Canva и русские шрифты

Работа с текстом в Canva – один из самых частых вопросов, которые мне задают. И чаще всего проблемы возникают с использованием кириллицы, то есть русских шрифтов в Canva. Ну что ж, будем разбираться и с этим. Напомню, что в текст в графическом редакторе – это такой же слой, как и все другие. И многие инструменты те же самые, что и при работе с картинками. Но есть несколько, которые относятся только к текстам. Давайте по порядку, с самых азов.

Как добавить текст в Canva в ваш макет

Перейдите в левом меню во вкладку «Текст». Далее два варианта добавления текста:

Каждый из способов по-своему хорош, но для русскоязычных макетов, где используется кириллица, удобнее будет второй вариант.

Встроенные шаблоны текста в Канве

Для использования встроенных шаблонов дизайнерского оформления текста просто выберите понравившийся и кликните по нему.

Текст окажется на вашем макете. Вам остается лишь поставить его в нужное место, перетащив мышкой, и заменить шаблонный текст на свой собственный. Для изменения размеров растягивайте текстовый блок за маркеры.

В чем подвох данного способа?

Поэтому я советую вставлять текст «с нуля». То есть сразу создать свой собственный шаблон, выбрав шрифты, и его в дальнейшем использовать.

Вставка текста без шаблонов Канвы

Кликните команду «Заголовок» все в той же вкладке «Текст» и заготовка нового текста окажется на вашем шаблоне.

Выглядит при вставке всегда одинаково, как на рисунке ниже.

Читайте также:  Как правильно написать слово горечь

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

Русские шрифты в Canva

Вопрос столь важный, что я решила его выделить в отдельный блок. В Canva шрифт кириллица выделен в общем списке отдельно в самом начале. Кликните по кнопке выбора шрифтов и первая часть списка – именно кириллица, если, конечно, вы указали при регистрации русский язык.

На данный момент красивых кириллических шрифтов достаточно, чтобы оформить макет красиво. Вот несколько примеров разного начертания. Текст и рядом название шрифта. Я думаю, есть, с чем работать!

И еще несколько картинок, на которых название шрифта и пример его отображения в тексте. Я выбрала наиболее забавные, не стандартные.

Если ваша Canva не поддерживает кириллицу, то проверьте в настройках, какой выбран язык при установке.

Как добавить шрифты в Canva

Если вам не хватает тех шрифтов, которые уже есть в Канве, то переходите на платную версию и вам станет доступна возможность добавить свои собственные шрифты. В том числе и русские шрифты для canva com. Моя задача – показать возможности бесплатного использования графического редактора Канва, коих великое множество.

Изменение размера текста в Канва

После того, как вы набрали с клавиатуры свой текст, его нужно отформатировать. Выберите подходящий шрифт, размер и цвет в верхнем меню. Там есть еще кнопки для «жирного» текста и курсива.

Для удобства, если текст не вписался в одну строку, растяните маркеры от края до края макета. Или же, наоборот, ограничьте место под текст, если того требует ваш макет, сдвигая маркеры.

Перетаскивается текст в нужное место как обычные картинки. Подвигайте над текстом мышкой, поймайте тот момент, когда курсор станет крестообразным, и смело тащите.

Выравнивание текста в Канве и использование заглавных букв

Текст относительно краевых маркеров можно устанавливать с отбивкой вправо, влево, посередине. В том же верхнем меню есть значок в виде буквы «А», при нажатии на который все буквы текста станут заглавными. И кнопка для оформления списка.

Интервалы в тексте межбуквенный и между строк

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

Посмотрите на примере, как это может выглядеть. Я не меняла шрифт, только интервалы между букв и строк.

Данный инструмент расположен в верхнем меню и так и называется «Интервалы». Двигайте бегунки и выбирайте нужные вам размеры пробелов и разрывов между строк.

Как сблизить строчки текста между собой

Поятните в указанном выше инструменте за бегунок «Высота строки» и увидите, как меняется расстояние между строчек, делая ваш макет более красивым и профессиональным.

Копирование, прозрачность, перенос текста в Канве на слой ниже

Все данные команды работают абсолютно также, как и с графическими объектами (картинками, фото, рисунками и т.д). Все кнопки расположены в верхнем меню, которое открывается при выделении текста. Не сложно разобраться. Вы можете располагать текст на картинке, под картинкой, делать его полупрозрачным, устанавливать на него ссылку и т.д. Если есть затруднения, то вернитесь к уроку Canva #3 про инструменты работы с фото.

Удалить текст, как и любой другой слой, можно нажатием значка корзины. Он самый крайний справа в верхней панели инструментов, не ошибетесь.

Почему в Canva не меняется шрифт

Еще один больной вопрос для многих. Чаще всего три варианта развития событий. То есть три причины, с которыми столкнулась я лично и обе легко решаемы.

Как сделать подложку под текст в канве

Допустим, что у вас готов фон (открытка, презентация, обложка для видео и др), есть заголовок. Но, к сожалению, на многоцветном фоне он не виден. Исправляем ситуацию с помощью подложки под текст.

Вариант 1. Как в Canva сделать фон текста однотонным

Цвет подложки меняется во вкладке в верхней панели.

Вариант 2. Фотография в качестве фона

Вставить фото, изменить размер, обрезать, если нужно. Разместить под текстовым слоем.

Минус такого способа — текст может потеряться.

Вариант 3. Фигурный фон под текстом

Используйте из вкладки Элементы-Рамка любую фигурный элемент. Вставьте в него ваше фото, любую картинку, которая подготовлена для фона.

Вариант 4. Градиент в качестве подложки под текст

Отлично смотрится градиентная заливка фигуры под текстом.

Можно использовать как Рамки, так и Сетки. Рамка может быть фигурной, а сетка только прямоугольной. И не все рамки могут менять размер именно так, как хочется. Но принцип действий один и тот же.

Для поиска градиентной картинки во вкладке Фото задайте в поиске «градиент«. И перетащите выбранный градиент на рамку (или на сетку, если используете ее).

Если данный слой оказался над текстом, то перенесите его ниже. Вы получите текст на фигурном фоне.

Читайте также:  Как правильно пишется слово указанному

Вариант 5. Видео в качестве фона для текста.

Наиболее интересный вариант, который используют редко из-за незнания того, как это сделано. Хорошо работает такой фон, когда на картинке есть компьютер или мобильник.

Пример такого графического решения на картинке слева.

Если используете такие картинки на сайте, то помните, что их «вес» значительно выше, чем у простых.

Как это сделано?

Во вкладке Элементы-Рамки выбирайте мобильник или компьютер. В общем-то подойдут любые другие рамки, но именно эти варианты смотрятся более эффектно.

В поле для вставки перетащите мышкой ваше видео или видео из галереи Канвы. Растяните, сдвиньте, если потребуется. Можно даже обрезать видео (команда «Сократ.» в верхней панели)

Сохраните в нужном формате: *gif или *mp4.

Более подробно о работе с видео в программе Canva читайте в статье «Как сделать видео в Канве для соцсетей».

Советы по работе с текстами

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

Источник

Как мы учились рисовать тексты на Canvas

Мы разрабатываем платформу для визуальной коллаборации. Для отображения контента мы используем Canvas: на нём рисуется всё, в том числе тексты. Готового решения для отображения текстов на Canvas один в один как в html не существует. За несколько лет работы с отрисовкой текстов мы изучили разные варианты реализации, набили много шишек и, кажется, нашли хорошее решение. Расскажу в статье, как мы переезжали с Flash на Canvas и почему отказались от SVG foreignObject.

Переезд с Flash

Мы создавали продукт в 2015 году на Flash. Внутри Flash есть текстовый редактор, умеющий хорошо работать с текстами, поэтому нам не нужно было делать ничего дополнительного для работы с текстами. Но в то время Flash уже умирал, поэтому мы переехали с него на HTML/Canvas. И перед нами встала задача — отображать текст на Canvas как в html-редакторе, при этом не сломать при переезде тексты, созданные во Flash-версии.

Мы хотели сделать так, чтобы пользователь мог редактировать текст прямо в нашем продукте, не замечая перехода между режимами редактирования и отрисовки. Решение мы видели такое: при клике на область с текстом открывается текстовый редактор, в котором можно менять текст; редактор можно закрыть, убирая курсор с области с текстом. При этом отображение текста на Canvas должно 1 в 1 соответствовать отображению текста в редакторе.

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

Мы рассмотрели несколько вариантов решения:

Особенности работы SVG foreignObject

Как работает SVG foreignObject: у нас есть HTML из редактора → помещаем HTML в foreignObject → немного магии → получаем изображение → добавляем изображение на canvas

Про магию. Несмотря на то, что большинство браузеров поддерживают тег foreignObject, у каждого есть свои особенности для использование результата с canvas. FireFox работает с Blob объектом, в Edge нужно делать Base64 для изображения и возвращать data-url, а в IE11 тег вообще не работает.

После работы с SVG у нас появились интересные баги, которых мы не замечали на Flash. Текст с одним и тем же размером и шрифтом в разных браузерах отображался по-разному. Например, последнее слово в строке могло переноситься и наезжать на текст снизу. Для нас было важно, чтобы пользователи получали одинаковый вид виджетов, независимо от браузеров, в которых работают. На Flash с этим не было проблем, т.к. он везде одинаковый.

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

Во-вторых, экспериментальным путём пришли к тому, что необходимо добавить несколько необычных css-стилей для редактора и svg, чтобы уменьшить разницу отображения между браузерами:

Почему мы отказались от foreignObject

Всё работало хорошо, но однажды к нам пришли дизайнеры и попросили добавить поддержку шрифтов, чтобы создавать мокапы.

Мы задумались, можем ли мы сделать это с помощью foreignObject. Оказалось, что у него есть особенность, которая при решении этой задачи становится фатальным недостатком. Он может отображать HTML внутри себя, но не может обращаться к внешним ресурсам, поэтому все ресурсы, с которыми он работает, необходимо конвертировать в base64 и добавлять внутрь svg.

Это значит, что если у вас есть четыре текста, которые написаны OpenSans, вам нужно четыре раза полностью загрузить этот шрифт пользователю. Такой вариант нам не подходил.

Мы решили, что напишем свой Canvas Text с… хорошей производительностью, поддержкой векторного изображения, не забудем про IE 11

Почему нам важно векторное изображение? В нашем продукте любой объект на доске может зумится, а с векторным изображением мы можем создать его только один раз и переиспользовать вне зависимости от зума. Canvas.fillText рисует растровое изображение: в этом случае нам при каждом зуме нужно перерисовывать изображение, что, как мы думали, сильно сказывается на производительности.

Читайте также:  Как правильно написать номенклатуру в кассе

Создаём прототип

Первым делом мы создали простой прототип, чтобы проверить его производительность.

Принцип работы прототипа:

С первой задачей прототип справился, скейл почти не влиял на производительность при рисований текстов. Со второй задачей возникли проблемы: обработка больших объёмов текста занимает достаточно времени и первые замеры производительности показали плохие результаты. Для отрисовки текста из 1К символов новому подходу требовалось почти в 2 раза больше времени, чем svg.

Мы решили воспользоваться самым надёжным способом оптимизаций кода — “заменить тест на нужный нам” ;-). А если серьёзно, то мы пошли к аналитикам и спросили, какой длины тексты чаще всего создают наши пользователи. Оказалось, что средний размер текста — 14 символов. Для таких коротких текстов наш прототип показал значительно лучшие результаты производительности, т.к. зависимость скорости от объёма текста у него линейная, а обёртка в svg выполняется почти всегда за одно и тоже время, независимо от длины текста. Это нас устраивало: мы можем проиграть в производительности на длинных текстах, но для большинства случаев наша скорость будет лучше, чем у svg.

После нескольких итераций работы над обновлением Canvas Text у нас получился такой алгоритм:

Этап 1. Разбиваем на логические блоки

В итоге мы сделали поддержку шрифтов и IE 11, покрыли всё юнит-тестами, а скорость отрисовки в большинстве случаев стала выше, чем у foreignObject. Проверили на бета-пользователях и зарелизили. Кажется, успех!

Успех длился 30 минут

Пока в техподдержку не написали ребята с правосторонней системой письма. Оказалось, что мы забыли о существовании таких языков:

К счастью, добавить поддержку правосторонней системы письма оказалось несложно, так как стандартный Canvas.fillText уже её поддерживает.

Но пока мы разбирались с этим, встретили ещё более интересные кейсы, которые fillText поддерживать уже не умел. Мы столкнулись с bidirectional текстами, в которых часть текста пишется справа налево, потом слева направо и снова справа налево.

Единственным вариантом решения, который мы знали, было идти в спецификацию W3C для браузеров и пытаться повторять это внутри Canvas Text. Это было сложно и больно, но мы смогли добавить базовую поддержку. Подробнее про bidirectional: раз и два.

Источник

CanvasText версия 0.2

Простой способ вывести стилизованный текст в элемент HTML5 canvas.

Что такое CanvasText?

Если вы пользовались элементом HTML5 Canvas, то наверняка знаете, как сложно выести в нем стилизованный текст.

Текущая версия 0.2 также включает систему кэширования, которая которая существенно уменьшает время выполнения операций.

Простое сравнение

Сначала просто сравним конечный результат с использованием библиотеки и без нее:

С использованием CanvasText

var CanvasText = new CanvasText ;

Преимущества:

БЕЗ CanvasText

var canvas = document. getElementById ( «canvas» ) ;
var context = canvas. getContext ( ‘2d’ ) ;
var Red = «#ff5e99» ;
var Blue = «#29a1f1» ;
var Black = «#000» ;
var x = 10 ;
var y = 40 ;
var txt_p1 = «Мне нравится » ;
var txt_p2 = «синий» ;
var txt_p3 = » цвет, также как и » ;
var txt_p4 = «розовый» ;
var txt_p5 = «!» ;
var txt_p6 = «Тем не менее, лучше использовать» ;
var txt_p7 = «, а не » ;
var txt_p8 = «. ;)!» ;

Недостатки:

Описание

Примечание: Файл с исходниками содержит примеры использования.

Содержание

1. Установка

Прежде всего нужно скачать файл CanvasText.js

2. Запускаем!

Создаем новый экземпляр класса CanvasText и сохраняем его в переменной.

Данное действие можно делать где угодно: внутри объекта, внутри функции.

2.1. Устанвливаем основную конфигурацию

Важно: Выполняйте данную операцию после полной загрузки страницы (window.onload).

Для устновки стиля по умолчанию нужно использовать метод CanvasText.config(). Обязательно нужно передать методу объект со свойством «canvasId«.

Доступные парметры для версии 0.2:

2.2. Пишем текст: встроенные стили

Теперь выведем текст!

Использование встроенных стилей является самым быстрым способом вывести текст, но не самым правильным.

Метод CanvasText.drawText() отвечает за вывод текста.

Ему нужно передать объект со свойствами «text«, «x» и «y«.

Синтаксис задания стилей полностью соответствует CSS.

2.2.1. Доступные свойства для встроенных стилей

В версии 0.2 можно использовать следующие свойства:

2.2.2. Создание классов

Чтобы не писать одинаковые свойства стилей снова и снова, нужно исопльзовать классы.

Для создания нового класса нужно вызвать метод «CanvasText.defineClass«.

И передать ему два значения: строку с именем класса и объект со свойствами класса.

var text = ‘Мне нравится синий цвет!’ ;

2.2.3. Доступные свойства классов

В версии 0.2 доступны следующие свойства классов:

2.2.4. Вставка новой строки

Вы можете использовать тег «
» в тексте для вставки новой строки.

3. Система кэширования

Если ваше приложение выовдит текст много раз в секунду, то кэширование предназначено для вас :)!

Проверка выполнялась н аэлементе canvas с размерами 5000×5000 заполненном текстом.

Результаты говорят сами за себя:

Для кэширования текста нужно добавить свойство «cacheId» при вызове метода drawText:

Источник

Простые слова
Adblock
detector