Свойство textAlign устанавливает/возвращает текущее выравнивание относительно опорной точки для текстового содержим.
Обычно, вывод текста НАЧИНАЕТСЯ в заданной позиции. Тем не менее, если задать textAlign="right" и вывести текст в позиции 150, то это означает, что текст ЗАКОНЧИТСЯ в позиции 150.
Примечание: Чтобы позиционировать текст на холсте и в действительности его отобразить, используется метод fillText() или strokeText().
| Значение по умолчанию: | start |
| JavaScript синтаксис: | context.textAlign="center | end | left | right | start"; |
Возможные значения
| Значение | Описание |
|---|---|
| start | Значение по умолчанию. Вывод текста начинается в заданной позиции |
| end | Текст заканчивается в заданной позиции |
| center | В заданной позиции будет центр текста |
| left | Текст начинается в заданной позиции |
| right | Текст заканчивается в заданной позиции |
Пример использования
Создадим красную линию в позиции 150. Позиция 150 будет опорной точкой для всех текстовых строк в данном примере. Посмотрим эффект от каждого значения свойства textAlign:
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);
