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

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

After having seen how to apply styles and colors in the previous chapter, we will now have look at how to draw text onto the canvas.

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

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

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

Пример fillText

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

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

Пример strokeText

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

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

Стиль текста

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

font = value
Это основной стиль, который будет использоваться для вывода текста. Строка имеет такой же синтаксис как CSS-свойство font. По умолчанию равно 10px sans-serif.
textAlign = value
Настройка выравнивания текста. Возможные значения: start, end, left, right or center. По умолчанию равно start.
textBaseline = value
Настройка выравнивания текста по вертикали. Возможные значения: top, hanging, middle, alphabetic, ideographic, bottom. По умолчанию равно alphabetic.
direction = value
Направление текста. Возможные значения: 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.

Пример textBaseline

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

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

Измерение текста

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

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

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

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. На данный момент они устарели и уже, возможно, удалены, поэтому их правильная работа не гарантируется.

Метки документа и участники

 Внесли вклад в эту страницу: lavavrik
 Обновлялась последний раз: lavavrik,