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

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

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

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

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

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

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

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

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

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.

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

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.

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

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

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