CanvasRenderingContext2D.textAlign
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Свойство 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);
Отредактируйте приведённый ниже код и посмотрите, как обновляется ваше обновление на холсте:
Спецификации
Specification |
---|
HTML Standard # dom-context-2d-textalign-dev |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- Интерфейс, предоставляющий данный метод
CanvasRenderingContext2D
.