CanvasRenderingContext2D.textAlign

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

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

BCD tables only load in the browser

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