Рисование текста
================

* « Предыдущая статья
* Следующая статья »

После того, как мы увидели в предыдущей главе, как применять стили и цвета, взглянем на написание текста в canvas.

Рисование текста
----------------

Контекст рендеринга canvas предоставляет два метода для рисования текста:

`fillText(text, x, y [, maxWidth])`

Вставляет заданный текст в положении (x,y). Опционально может быть указана максимальная ширина.

`strokeText(text, x, y [, maxWidth])`

Вставляет контур заданного текста в положении (x,y). Опционально может быть указана максимальная ширина.

### Пример `fillText`

Текст вставлен с использованием текущего `fillStyle`.


```js
function draw() {
  var ctx = document.getElementById("canvas").getContext("2d");
  ctx.font = "48px serif";
  ctx.fillText("Hello world", 10, 50);
}
```


```
<canvas id="canvas" width="300" height="100"></canvas>
```


```
draw();
```

### Пример `strokeText`

Текст вставлен с использованием текущего `strokeStyle`.


```js
function draw() {
  var ctx = document.getElementById("canvas").getContext("2d");
  ctx.font = "48px serif";
  ctx.strokeText("Hello world", 10, 50);
}
```


```
<canvas id="canvas" width="300" height="100"></canvas>
```


```
draw();
```

Стилизация текста
-----------------

В примерах выше мы уже использовали свойство font для изменения размера текста. Кроме него существуют ещё несколько свойств, позволяющие настроить вывод текста на canvas:

`font = value`

Это основной стиль, который будет использоваться для вывода текста. Строка имеет такой же синтаксис, как CSS-свойство `font`. По умолчанию - sans-serif высотой 10px.

`textAlign = value`

Настройка выравнивания текста. Возможные значения: `start`, `end`, `left`, `right` или `center`. По умолчанию - `start`.

`textBaseline = value`

Настройка выравнивания текста по вертикали. Возможные значения: `top`, `hanging`, `middle`, `alphabetic`, `ideographic`, `bottom`. По умолчанию - `alphabetic`.

`direction = value` (en-US)

Направление текста. Возможные значения: `ltr`, `rtl`, `inherit`. По умолчанию - `inherit`.

Эти свойства могут быть вам знакомы если вы работали с CSS.

Изображение от WHATWG ниже показывает различные варианты свойства `textBaseline`.
 ![The top of the em square is
roughly at the top of the glyphs in a font, the hanging baseline is
where some glyphs like आ are anchored, the middle is half-way
between the top of the em square and the bottom of the em square,
the alphabetic baseline is where characters like Á, ÿ,
f, and Ω are anchored, the ideographic baseline is
where glyphs like 私 and 達 are anchored, and the bottom
of the em square is roughly at the bottom of the glyphs in a
font. The top and bottom of the bounding box can be far from these
baselines, due to glyphs extending far outside the em square.](http://www.whatwg.org/specs/web-apps/current-work/images/baselines.png)

### Пример textBaseline

Редактируя код ниже, вы можете видеть, как меняется отображение текста на canvas в реальном времени:


```js
ctx.font = "48px serif";
ctx.textBaseline = "hanging";
ctx.strokeText("Hello world!", 0, 100);
```


```
<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.textBaseline = "hanging";
ctx.strokeText("Hello world", 0, 100);</textarea
>
```


```
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);
```

Измерение ширины текста
-----------------------

Для измерения ширины текста (без рисования его на canvas) можно воспользоваться следующим методом:

`measureText()`

Возвращает объект `TextMetrics` (en-US), содержащий ширину текста в пикселах, до отрисовки на canvas.

Пример ниже показывает, как можно измерить ширину текста.


```js
function draw() {
  var ctx = document.getElementById("canvas").getContext("2d");
  var text = ctx.measureText("foo"); // TextMetrics object
  text.width; // 16;
}
```

Примечания
----------

В ранних версиях Gecko (движок рендеринга в Firefox, Firefox OS и других приложениях Mozilla) были реализованы методы API с префиксами для рисования текста на canvas. На данный момент они устарели и уже, возможно, удалены, поэтому их правильная работа не гарантируется.

* « Предыдущая статья
* Следующая статья »