Свойство 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);
Отредактируйте приведенный ниже код и посмотрите, как обновляется ваше обновление на холсте:
Playable code
Спецификации
Спецификация | Статус | Комментарии |
---|---|---|
HTML Living Standard Определение 'CanvasRenderingContext2D.textAlign' в этой спецификации. |
Живой стандарт |
Совместимость с браузерами
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Смотрите также
- Интерфейс, предоставляющий данный метод
CanvasRenderingContext2D
.