Свойство CanvasRenderingContext2D.textAlign Canvas 2D API определяет текущее выравнивание текста, использованное при прорисовке. Но следует помнить, что выравнивание основывается на значении x метода fillText(). Так что, если значение textAlign равно "center", то текст будет прорисован в x - (width / 2).

Синтаксис

ctx.textAlign = "left" || "right" || "center" || "start" || "end";

Параметры

left
Выравнивание текста по левому краю.
right
Выравнивание текста по правому краю.
center
Текст отцентрирован.
start
Выравнивание текста в обычном начале строки (левостороннее выравнивание для языков, направленных слева направо, правостороннее - для направленных справа налево).
end
Выравнивание текста в конце строки (правостороннее выравнивание для языков, направленных слева направо, левостороннее - для направленных справа налево

По умолчанию значение textAlign установлено как "start".

Примеры

Использование значения textAlign

Довольно простой сниппет использования значения textAlign для изменения выравнивания текста.

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.font = '48px serif';
ctx.textAlign = 'left';
ctx.strokeText('Hello world', 0, 100);

Отредактируйте приведенный ниже код и посмотрите, как обновляется ваше обновление на холсте:

Спецификации

Спецификация Статус Комментарии
HTML Living Standard
Определение 'CanvasRenderingContext2D.textAlign' в этой спецификации.
Живой стандарт  

Совместимость с браузерами

ВозможностьChromeEdgeFirefoxInternet ExplorerOperaSafari
Базовая поддержка Да123.5 Да Да Да
ВозможностьAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Базовая поддержка Да Да Да4 Да Да Да

Смотрите также

Метки документа и участники

Внесли вклад в эту страницу: Omiant
Обновлялась последний раз: Omiant,