context.fillText(text, x, y [, maxWidth ])
Заполняет заданный текст в заданной позиции. Если указана максимальная ширина, текст будет масштабироваться в соответствии с этой шириной, если это необходимо.
context.strokeText(text, x, y [, 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
