Свойство 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' в этой спецификации.
Живой стандарт  

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidiOS SafariSamsung Internet
Базовая поддержкаChrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка 3.5IE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да

Легенда

Полная поддержка  
Полная поддержка

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

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

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