Отрисовка текста на canvas’e


Для отрисовки текста на canvas‘е используеутся методы fillText(text, x, y) и strokeText(text, x, y). Первый метод рисует текст, заполненный заливкой, которая хранится в свойстве fillStyle, второй рисует обводку текста. Параметры отрисовываемого текста устанавливаются при помощи свойств:

  • font — шрифт текста.
  • textAlign — горизонтальное выравнивание текста, по умолчанию это свойство равно start. Оно может принимать ещё четыре значения: end, left, right, center.
  • textBaseline — определяет вертикальное выравнивание текста, по умолчанию это свойство равно alphabetic. Оно может принимать ещё три значения: top, hanging, middle.

Свойства выравнивания текста textAlign и textBaseline влияют на позиционирования текста относительно координат x и y, которые задаются при вызове методов fillText и strokeText. Если свойство textAlign равно end или right, то текст будет рисоватся слева от точки с координатами x и y, которые указаны при вызове метода fillText или strokeText. Если значение этого свойства равно start или left, то текст будет рисоваться справа от этой точки. При значении свойства textAlign, равном center, точка с координатами x и y будет находится ровно посередине текста и ниже его.

На стиль заливки текста влияет свойство fillStyle. На цвет обводки свойство strokeStyle. Всё точно так же как и при рисовании кривых, линий, прямоугольников и т.д.

Следующий код нарисует на canvas‘е надпись “Привет, прекрасный мир!“ шрифтом Arial с градиентной заливкой и тенью.

Посмотреть демо

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var canv = document.getElementById('canv'),
  g = canv.getContext('2d'),
 
grad = g.createLinearGradient(50, 0, 400, 0);
 
grad.addColorStop(0, 'red');        
grad.addColorStop(0.5, 'green');      
grad.addColorStop(1, 'blue');      
 
g.fillStyle = grad;
g.shadowOffsetX = 2;
g.shadowOffsetY = 2;
g.shadowBlur = 3;
g.shadowColor = 'black';
 
g.font = '30px arial';
g.fillText('Привет, прекрасный мир!', 50, 50);

Следующий раз я расскажу вам, про как трансформировать изображения на canvas’e и менять систему координат.