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
html
<canvas id="canvas"></canvas>
JavaScript
js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font = "48px serif";
ctx.textAlign = "left";
ctx.strokeText("Hello world", 0, 100);
Отредактируйте приведённый ниже код и посмотрите, как обновляется ваше обновление на холсте:
Спецификации
Specification |
---|
HTML Standard # dom-context-2d-textalign-dev |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- Интерфейс, предоставляющий данный метод
CanvasRenderingContext2D
.