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

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

Контекст рендеринга 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);
}

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

draw();

Пример strokeText

Текст вставлен с использованием текущего 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. По умолчанию равно 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.

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