Javascript свойство textAlign

Свойство textAlign устанавливает/возвращает текущее выравнивание относительно опорной точки для текстового содержим.

Обычно, вывод текста НАЧИНАЕТСЯ в заданной позиции. Тем не менее, если задать textAlign="right" и вывести текст в позиции 150, то это означает, что текст ЗАКОНЧИТСЯ в позиции 150.

Примечание: Чтобы позиционировать текст на холсте и в действительности его отобразить, используется метод fillText() или strokeText().

Значение по умолчанию: start
JavaScript синтаксис: context.textAlign="center | end | left | right | start";

Возможные значения

Значение Описание
start Значение по умолчанию. Вывод текста начинается в заданной позиции
end Текст заканчивается в заданной позиции
center В заданной позиции будет центр текста
left Текст начинается в заданной позиции
right Текст заканчивается в заданной позиции

Пример

Создадим красную линию в позиции 150. Позиция 150 будет опорной точкой для всех текстовых строк в данном примере. Посмотрим эффект от каждого значения свойства textAlign:

Ваш браузер не поддерживает HTML5 тег canvas.

JavaScript:


var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Создадим вертикальную красную линию
ctx.strokeStyle="red";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();

ctx.font="15px Arial";

// Покажем различные значения textAlign
ctx.textAlign="start"; 
ctx.fillText("textAlign=start",150,60); 
ctx.textAlign="end"; 
ctx.fillText("textAlign=end",150,80); 
ctx.textAlign="left"; 
ctx.fillText("textAlign=left",150,100);
ctx.textAlign="center"; 
ctx.fillText("textAlign=center",150,120); 
ctx.textAlign="right"; 
ctx.fillText("textAlign=right",150,140);