--- title: CanvasRenderingContext2D.textAlign slug: Web/API/CanvasRenderingContext2D/textAlign tags: - API - Canvas - Выравнивание - Значение - Текст translation_of: Web/API/CanvasRenderingContext2D/textAlign --- <div>{{APIRef}}</div> <p>Свойство <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.textAlign</code></strong> Canvas 2D API определяет текущее выравнивание текста, использованное при прорисовке. Но следует помнить, что выравнивание основывается на значении x метода {{domxref("CanvasRenderingContext2D.fillText", "fillText()")}}. Так что, если значение <code>textAlign</code> равно <code>"center"</code>, то текст будет прорисован в <code>x - (width / 2)</code>.</p> <h2 id="Синтаксис">Синтаксис</h2> <pre class="syntaxbox"><var><em>ctx</em>.textAlign = "left" || "right" || "center" || "start" || "end";</var> </pre> <h3 id="Параметры">Параметры</h3> <dl> <dt><code>left</code></dt> <dd>Выравнивание текста по левому краю.</dd> <dt><code>right</code></dt> <dd>Выравнивание текста по правому краю.</dd> <dt><code>center</code></dt> <dd>Текст отцентрирован.</dd> <dt><code>start</code></dt> <dd>Выравнивание текста в обычном начале строки (левостороннее выравнивание для языков, направленных слева направо, правостороннее - для направленных справа налево).</dd> <dt><code>end</code></dt> <dd>Выравнивание текста в конце строки (правостороннее выравнивание для языков, направленных слева направо, левостороннее - для направленных справа налево</dd> </dl> <p>По умолчанию значение <code>textAlign </code>установлено как <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">"start"</span></font>.</p> <h2 id="Примеры">Примеры</h2> <h3 id="Using_the_textAlign_property">Использование значения <code>textAlign</code></h3> <p>Довольно простой сниппет использования значения <code>textAlign </code>для изменения выравнивания текста.</p> <h4 id="HTML">HTML</h4> <pre class="brush: html"><canvas id="canvas"></canvas> </pre> <h4 id="JavaScript">JavaScript</h4> <pre class="brush: js">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.font = '48px serif'; ctx.textAlign = 'left'; ctx.strokeText('Hello world', 0, 100); </pre> <p>Отредактируйте приведённый ниже код и посмотрите, как обновляется ваше обновление на холсте:</p> <div class="hidden"> <h6 id="Playable_code">Playable code</h6> <pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> <input id="edit" type="button" value="Edit" /> <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.font = '48px serif'; ctx.textAlign = 'left'; ctx.strokeText('Hello world', 0, 100);</textarea> </pre> <pre class="brush: js">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var edit = document.getElementById('edit'); var code = textarea.value; function drawCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addEventListener('click', function() { textarea.value = code; drawCanvas(); }); edit.addEventListener('click', function() { textarea.focus(); }) textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas); </pre> </div> <p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> <h2 id="Спецификации">Спецификации</h2> {{Specifications}} <h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> <p>{{Compat("api.CanvasRenderingContext2D.textAlign")}}</p> <h2 id="Смотрите_также">Смотрите также</h2> <ul> <li>Интерфейс, предоставляющий данный метод {{domxref("CanvasRenderingContext2D")}}.</li> </ul>