Предыдущий ролик Следующий ролик  

Видео урок: Обработка текста

HTML5: графика и анимация с Canvas

В canvas интересно то, что наряду с рисованием простых и сложных фигур, кривых, контуров и так далее, вы также можете рисовать текст напрямую в canvas, используя множество настроек для рисования текста. По факту, написание текста очень схоже на рисование других фигур. Вы можете обрамлять буквы. Вы можете заполнять их, используя fillStyle и strokeStyle, так же как и при этих операциях для других фигур. Важно отметить, что когда вы рисуете текст в canvas, на него никак не влияет "коробочная" модель CSS; это просто контур, он рисуется с использованием правил canvas, а не правил CSS, которые вы могли определить в вашем документе.

Также важно отметить, что вы не обязаны использовать текст в canvas в качестве замены для обычного текста документа, потому что это не сработает. По факту, скрин ридеры не смогут "прочесть" текст, который вы нарисовали в canvas. Если вы вдруг подумали о том, чтобы использовать canvas для замены заголовков, например, h1 или h2 и так далее, вы должны все же найти другой способ сделать это, поскольку это не отобразится людям, которые полагаются на вспомогательные технологии.

Чтобы нарисовать текст в canvas, мы используем некоторые свойства и методы для рисования текста, вот они. Мы можем установить несколько свойств. Во-первых, вы можете установить шрифт для текста, который вы хотите написать, и все, что вы обычно вставляете в правило для шрифтов в CSS, может быть и здесь. Также вы можете установить textAlign и textBaseline. textAlign может быть установлен на start, это по умолчанию, от этой точки начинает рисоваться текст. Также есть end, left, right и center. Для textBaseline есть несколько других настроек. Некоторые из них довольно продвинутые, так что слишком глубоко вникать в них мы не будем.

Есть top, middle или bottom, которые могут использоваться в обычном HTML. Но также здесь есть ideographic и hanging, и они используются для языков, как, например, китайского или корейского, где базовая линия с ideographic включает в себя определенные символы. canvas дает вам управление над тем, как будет нарисован текст. Данные три свойства определяют, как текст будет выглядеть. Это очень похоже на то, как вы настраиваете fillStyle или strokeStyle для окаймления и заполнения и так далее.

Далее, следующие несколько шаблонов рисуют текст. Есть метод fillText, который обрабатывает текстовую строку, и у него есть аргумент txt: это строка, которую вы хотите нарисовать, от этой точки x и y. Этот параметр maxW является опциональным, вот почему он пишется в скобках. Если вы укажете maxWidth, тогда canvas изобразит эту строку не шире, чем заданное пространство. canvas сожмет символы, если нужно, или сделает все возможное, чтобы строка вписывалась в это пространство.

Наряду с fillText есть strokeText. Идея такая же. Вы даете этому методу текст, который нужно обрамить, вы задаете точку, от которой должен быть написан текст, а также опционально максимальную ширину. И последняя функция, measureText, вернет размерные показатели строки, которую вы ей передали, используя текущие настройки шрифта, которые вы ей тоже передали. А теперь давайте рассмотрим некоторые примеры по написанию текста.

Вот мы в редакторе кода, раздел Text файла ExampleSnippets. Открываю пример text_start. Возвращаемся к кускам кода и копируем вот эти строки. Первый пример - это строка, которую мы нарисуем, копируем этот первый пример, вставляем, сохраняем. Это действительно простой пример. У меня есть строка, которую я хочу отобразить, и отображать ее я буду, используя настройки по умолчанию, существующие для отображения текста в canvas.

Сохраняем, и давайте посмотрим на этот пример в браузере. Вы видите, что по умолчанию размер текста довольно маленький, и строка начинается с той точки, что я указал - 10, 20, вот она. Давайте вернемся и сделаем кое-что более продвинутое, возвращаемся к кускам кода. В этот раз давайте напишем строку с некоторой информацией о шрифтах. Размещаем вот это. Сейчас в рисующем контексте мы устанавливаем шрифт на 25pt Georgia, а теперь мы заполним текст в другой точке, которая ниже первой. Сейчас мы посмотрим на результат. Обновляем страницу.

Вы видите, что сейчас у нарисованного текста больший шрифт, а также сам шрифт другой. Продолжим. Возвращаемся в Snippets, и на сей раз мы заполним текст, используя для этого fillStyle. Копирую эти строки, вставляю их и сохраняю. Сейчас мы используем для fillStyle blue, чтобы закрасить текст, и давайте посмотрим, как это работает. Итак, все довольно мило выглядит. Такая же строка, только другого цвета.

Вернемся к коду. Теперь давайте нарисуем строку с заполнением и окаймовкой. Копируем, вставляем. В данном случае я определил шрифт 32pt Verdana. У нас есть fillStyle, у нас есть strokeStyle, и в данном случае strokeStyle установлен на green и 80% opacity, и сейчас мы заполним и окаймим строку.

Давайте сделаем это. Здесь у нас немного другой результат. Давайте уберем комментарий с этой строки, которая устанавливает базовую линию, просто я хочу вам показать, что такое базовая линия. Сохраняем, и вот таков наш результат. Если мы обновим страницу, вы увидите, что текст спустился немного вниз. Продолжим, вернем все назад и обновим страницу, все вернулось к предыдущему состоянию. И наконец, для последнего примера давайте использовать measureText, вот сюда мы поставим восклицательный знак, чтобы вы увидели, как это работает. Спускаемся сюда и копируем measureText, я это поясню.

Идем сюда и вставляем эти строки. В данном случае мы вызываем функцию measureText, и когда вы вызываете measureText для theString, и этот аргумент в данном случае будет текстовой строкой, тогда берутся текущие настройки шрифта и мера, насколько широким будет текст. Нет встроенного метода, чтобы измерить ширину шрифта, но вы довольно легко можете все уладить, создав фиктивный диапазон и вставив текст внутрь этого диапазона, а затем использовать возможности CSS, доступные в вашем браузере, чтобы просмотреть высоту диапазона. Это даст вам информацию о высоте текста. Но нет встроенного метода, чтобы сделать это.

Это простой пример. Мы просто рассчитаем ширину. Возвращаюсь сюда, и мне на самом деле возвращается объект, у которого есть свойство width. Затем мы вызываем beginPath, устанавливаем strokeStyle на black, затем мы перемещаем точку, находящуюся под текстовой строкой, а затем мы создаем линию, которая является шириной текста в той же точке Y. Я хочу подчеркнуть текст, а затем мы вызываем stroke, чтобы заполнить строку. Сохраняем и обновляем страницу.

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

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