CanvasRenderingContext2D: метод strokeText()

Метод CanvasRenderingContext2D strokeText(), часть API Canvas 2D, выводит контур — то есть, рисует контуры — символов строкового значения в заданных координатах. Дополнительный параметр позволяет указать максимальную ширину рендерного текста, которая достигается агентом пользователя путём сжатия текста или уменьшения размера шрифта.

Этот метод рисует непосредственно на холсте, не изменяя текущую траекторию, поэтому последующие вызовы fill() или stroke() не повлияют на него.

text

Строка, определяющая строку текста для рендеринга в контексте. Текст рендерится с использованием параметров, заданных в font, textAlign, textBaseline и direction.

x

Координата x точки, с которой начинается рисование текста.

y

Координата y точки, с которой начинается рисование текста.

maxWidth Необязательно

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

None (undefined).

В этом примере слова "Hello world" выводятся с помощью метода strokeText().

HTML

Сначала нам нужен холст для рисования. Этот код создает контекст шириной 400 пикселей и высотой 150 пикселей.

<canvas id="canvas" width="400" height="150"></canvas>

JavaScript

Код JavaScript для этого примера представлен ниже.

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.font = "50px serif";
ctx.strokeText("Hello world", 50, 90);

Этот код получает ссылку на <canvas>, а затем получает ссылку на его двумерный графический контекст.

После этого мы задаем font в 50 пикселей высотой "serif" (стандартный шрифт с засечками пользователя), а затем вызываем strokeText() для вывода текста "Hello world" с началом в координатах (50, 90).

Результат

В этом примере слова "Hello world" выводятся с ограничением ширины до 140 пикселей.

HTML

<canvas id="canvas" width="400" height="150"></canvas>

JavaScript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.font = "50px serif";
ctx.strokeText("Hello world", 50, 90, 140);

Результат

• Отрисовка текста
• Интерфейс, определяющий этот метод: CanvasRenderingContext2D
• CanvasRenderingContext2D.fillText()