CanvasRenderingContext2D.textAlign

Свойство CanvasRenderingContext2D.textAlign Canvas 2D API определяет текущее выравнивание текста, использованное при прорисовке. Но следует помнить, что выравнивание основывается на значении x метода fillText(). Так что, если значение textAlign равно "center", то текст будет прорисован в x - (width / 2).

Синтаксис

ctx.textAlign = "left" || "right" || "center" || "start" || "end";

Параметры

left

Выравнивание текста по левому краю.

Выравнивание текста по правому краю.

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

Смотрите также