• Назад
• Далее

После того, как мы увидели в предыдущей главе, какприменять стили и цвета, взглянем на написание текста в 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);}

<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 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

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

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

Изображение отWHATWG ниже показывает различные варианты свойстваtextBaseline.

Пример textBaseline

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

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

<canvas width="400" height="200"></canvas><div>  <input type="button" value="Edit" />  <input type="button" value="Reset" /></div><textarea>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. На данный момент они устарели и уже, возможно, удалены, поэтому их правильная работа не гарантируется.

• Назад
• Далее