canvas | Нанесение текста на растровое изображение

canvas | Нанесение текста на растровое изображение

Для веб-разработчиков (не нормативно)

context.fillText(textxy [, maxWidth ])

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

context.strokeText(textxy [, maxWidth ])

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

metrics = context.measureText(text)

Возвращает объект TextMetrics с метриками данного текста в текущем шрифте.

metrics.width

metrics.actualBoundingBoxLeft

metrics.actualBoundingBoxRight

metrics.fontBoundingBoxAscent

metrics.fontBoundingBoxDescent

metrics.actualBoundingBoxAscent

metrics.actualBoundingBoxDescent

metrics.emHeightAscent

metrics.emHeightDescent

metrics.hangingBaseline

metrics.alphabeticBaseline

metrics.ideographicBaseline

Возвращает измерение, описанное ниже.

 

Объекты, реализующие интерфейс CanvasText, предоставляют следующие методы для визуализации текста.

Методы fillText(text, x, y, maxWidth) и strokeText(text, x, y, maxWidth) отображают заданный текст text в заданных (x, y) координатах, гарантируя, что текст не шире, чем maxWidth, если указано, используя текущие значения шрифта font, выравнивания текста textAlign и базовой линии textBaseline. В частности, при вызове методов пользовательский агент должен выполнить следующие шаги:

1. Если какой-либо из аргументов бесконечен или NaN, то возврат.
2. Запустите алгоритм подготовки текста, передав ему текст text, объект, реализующий интерфейс CanvasText, и, если был предоставлен аргумент maxWidth, этот аргумент. Пусть глифы glyphs будут результатом.
3. Переместите все фигуры в глифах glyphs вправо на x пикселей CSS и вниз на y пикселей CSS.
4. Нарисуйте фигуры, заданные в глифах glyphs, как преобразованные текущей матрицей преобразования, с каждым пикселем CSS в координатном пространстве глифов glyphs, сопоставленным с одной единицей координатного пространства.

Для fillText() стиль заливки объекта контекста (this) должен применяться к фигурам и стиль обводки объекта контекста (this) должен игнорироваться. Для strokeText() верно обратное: стиль обводки объекта контекста (this) должен применяться к результату трассировки фигур с использованием объекта, реализующего интерфейс CanvasText для стилей линий, а для стиля заливки объекта контекста (this) должен игнорироваться.

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

 

Шаги метода measureText(text) заключаются в запуске алгоритма подготовки текста, передаче ему текста text и объекта, реализующего интерфейс CanvasText, а затем с использованием возвращенного встроенного поля необходимо вернуть новый объект TextMetrics с элементами, ведущими себя, как описано в следующем списке: [CSS]

 

атрибут ширины width

Ширина этого встроенного блока в пикселях CSS. (Ширина продвижения текста.)

атрибут actualBoundingBoxLeft

Расстояние параллельно базовой линии от точки выравнивания, заданной атрибутом textAlign, до левой стороны ограничивающего прямоугольника данного текста в пикселях CSS; положительные числа, указывающие расстояние влево от заданной точки привязки.

Примечание

Сумма этого значения и следующего (actualBoundingBoxRight) может быть шире, чем ширина встроенного блока (width), в частности, для наклонных шрифтов, где символы выступают за пределы своей ширины.

 

атрибут actualBoundingBoxRight

Расстояние параллельно базовой линии от точки выравнивания, заданной атрибутом textAlign, до правой стороны ограничивающего прямоугольника данного текста в пикселях CSS; положительные числа, указывающие расстояние, идущее вправо от заданной точки привязки.

атрибут fontBoundingBoxAscent

Расстояние от горизонтальной линии, указанной атрибутом textBaseline, до метрики подъема первого доступного шрифта в пикселях CSS; положительные числа, указывающие расстояние, идущее вверх от заданной базовой линии.

Примечание

Это значение и следующее полезны при рендеринге фона, который должен иметь постоянную высоту, даже если точный отображаемый текст изменяется. Атрибут actualBoundingBoxAscent (и соответствующий ему атрибут спуска) полезен при рисовании ограничивающей рамки вокруг определенного текста.

атрибут fontBoundingBoxDescent

Расстояние от горизонтальной линии, указанной атрибутом textBaseline, до метрики спуска первого доступного шрифта в пикселях CSS; положительные числа, указывающие на расстояние вниз от заданной базовой линии.

атрибут actualBoundingBoxAscent

Расстояние от горизонтальной линии, указанной атрибутом textBaseline, до верха ограничивающего прямоугольника данного текста в пикселях CSS; положительные числа, указывающие расстояние, идущее вверх от заданной базовой линии.

Примечание

Это число может сильно различаться в зависимости от вводимого текста, даже если первый указанный шрифт покрывает все введённые символы. Например, значение actualBoundingBoxAscent буквы «o» в нижнем регистре от базовой линии алфавита будет меньше, чем у буквы «F» в верхнем регистре. Значение может легко быть отрицательным; например, расстояние от верхней части поля em (значение textBaseline «top«) до верхней части ограничивающего прямоугольника, когда данный текст представляет собой всего одну запятую «,«, скорее всего (если шрифт не совсем необычный) будет отрицательным.

 

атрибут actualBoundingBoxDescent

Расстояние от горизонтальной линии, указанной атрибутом textBaseline, до нижней границы ограничивающего прямоугольника данного текста в пикселях CSS; положительные числа, указывающие на расстояние вниз от заданной базовой линии.

атрибут emHeightAscent

Расстояние от горизонтальной линии, указанной атрибутом textBaseline, до самой высокой вершины квадратов em во встроенном блоке в пикселях CSS; положительные числа, указывающие, что заданная базовая линия находится ниже вершины этого квадрата em (поэтому это значение обычно будет положительным). Ноль, если данная базовая линия является вершиной этого квадрата em; половина размера шрифта, если данная базовая линия является серединой этого квадрата em.

атрибут emHeightDescent

Расстояние от горизонтальной линии, указанной атрибутом textBaseline, до нижнего края em-квадратов во встроенном блоке, в пикселях CSS; положительные числа, указывающие, что данная базовая линия находится выше нижней части этого квадрата em. (Ноль, если данная базовая линия является нижней частью этого квадрата em.)

атрибут hangingBaseline

Расстояние от горизонтальной линии, указанной атрибутом textBaseline, до выступающей базовой линии встроенного блока в пикселях CSS; положительные числа, указывающие на то, что заданная базовая линия находится ниже висячей базовой линии. (Ноль, если заданная базовая линия является висячей базовой линией.)

атрибут alphabeticBaseline

Расстояние от горизонтальной линии, указанной атрибутом textBaseline, до алфавитной базовой линии встроенного блока в пикселях CSS; положительные числа, указывающие на то, что данный базовый уровень ниже алфавитного базового уровня. (Ноль, если данная базовая линия является алфавитной базовой линией.)

атрибут ideographicBaseline

Расстояние от горизонтальной линии, указанной атрибутом textBaseline, до базовой линии идеографической подстроки в пикселях CSS; положительные числа, указывающие на то, что заданная базовая линия находится ниже идеографической базовой линии. (Ноль, если данная базовая линия является нижней идеографической базовой линией.)

Примечание

Глифы, отображаемые с помощью fillText() и strokeText(), могут выходить за пределы поля, заданного размером шрифта (размером квадрата em) и шириной, возвращаемой функцией measureText() (шириной текста). Авторам рекомендуется использовать значения ограничительной рамки, описанные выше, если это вызывает затруднения.

Примечание

Будущая версия API 2D-контекста может предоставить способ рендеринга фрагментов документов, визуализированных с помощью CSS, прямо на холсте. Это будет предпочтительнее специального способа многострочной компоновки.

 

 

Информационные ссылки

Стандарт HTML — Раздел «4.12.5.1.11 Drawing text to the bitmap» — https://html.spec.whatwg.org/multipage/canvas.html#drawing-text-to-the-bitmap