CanvasRenderingContext2D: метод fillText()

Метод CanvasRenderingContext2D fillText(), являющийся частью API Canvas 2D, рисует строку текста в заданных координатах, заполняя символы строки текущим fillStyle. Необязательный параметр позволяет указать максимальную ширину рендерируемого текста, которую пользовательский агент достигнет, уплотняя текст или уменьшая размер шрифта.

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

Текст рендерится с использованием настроек шрифта и вывода текста, определённых свойствами font, textAlign, textBaseline и direction.

text

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

x

Координата x на оси, с которой нужно начать рисовать текст, в пикселях.

y

Координата y базовой линии, с которой нужно начать рисовать текст, в пикселях.

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

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

None (undefined).

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

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.fillText("Hello world", 50, 90);

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

После этого мы устанавливаем font на "serif" высотой 50 пикселей (стандартный шрифт с засечками пользователя), а затем вызываем fillText() для вывода текста "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.fillText("Hello world", 50, 90, 140);

Результат

• Вывод текста
• CanvasRenderingContext2D
• CanvasRenderingContext2D.strokeText()