JavaScript. Подробное руководство, 6-е издание

21.4.9. Текст

Для рисования текста в холсте обычно используется метод fillText, который рисует текст, используя цвет (градиент или шаблон), определяемый свойством fillStyle. Если необходимо использовать специальные эффекты при выводе текста крупными символами, для рисования контуров отдельных символов можно применить метод strokeText (пример вывода контуров символов приводится на рис. 21.13). Оба метода принимают в первом аргументе текст, который требуется нарисовать, и координаты X и Y вывода текста во втором и третьем аргументах. Ни один из этих методов не вносит изменений в текущий контур и не смещает текущую точку. Как видно на рис. 21.7, при выводе текста учитывается текущее преобразование системы координат.

Свойство font определяет шрифт, который будет использоваться для рисования текста. Значение этого свойства должно быть строкой с соблюдением синтаксиса CSS-атрибута font. Например:

  "48pt sans-serif”
  "bold 18рх Times Roman"
  "italic 12pt monospaced"
  "bolder smaller serif" // жирнее и меньше, чем шрифт элемента <canvas>

Свойство textAlign определяет способ выравнивания текста по горизонтали с учетом координаты X, переданной методу fillText или strokeText. Свойство textBaseline определяет способ выравнивания текста по вертикали с учетом координаты Y. На рис. 21.12 показано действие всех допустимых значений этих свойств. Тонкая линия рядом с каждой строкой текста - это опорная линия шрифта, а маленький квадратик обозначает точку (х.у), координаты которой были переданы методу fillText.

По умолчанию свойство textAlign имеет значение «start». Обратите внимание, что для текста, который записывается слева направо, выравнивание, определяемое значением «start», совпадает с выравниванием, определяемым значением «left»,

аналогично совпадает и действие значений «end» «right». Однако если в элементе <canvas> определить атрибут dir со значением «rtl» (right-to-left - справа налево), действие значения «start» выравнивания будет совпадать с действием значения «right», а действие значения «end» - с действием значения «left».

Свойство textBaseline по умолчанию имеет значение «alphabetic», которое соответствует алфавиту Latin и подобным ему. Значение «ideographic» используется совместно с идеографическими алфавитами, такими как китайский и японский. Значение «hanging» предназначено для использования со слоговыми и подобными им алфавитами (которые используются во многих языках в Индии). Значения «top», «middle» и «bottom» определяют исключительно геометрическое положение опорной линии шрифта, исходя из размеров «кегельной площадки» шрифта.

Методы fillText и strokeText принимают четвертый необязательный аргумент. Этот аргумент определяет максимальную ширину отображаемого текста. Если текст окажется шире указанного значения, при заданном значении свойства font будет выполнено его масштабирование или будет использован более узкий или более мелкий шрифт.

Если вам потребуется узнать размеры текста до его вывода, передайте его методу measureText. Этот метод возвращает объект TextMetrics, определяющий размеры для текущего значения свойства font. На момент написания этих строк объект TextMetrics позволял определить только ширину текста. Определить ширину текстовой строки на экране можно следующим образом:

  var width = c.measureText(text).width;

21.4.10. Отсечение

После определения контура обычно вызывается метод stroke или fill (или оба). Можно также вызвать метод clip, чтобы определить область отсечения. После того как область отсечения будет определена, рисование будет выполняться только в ее пределах. На рис. 21.13 изображен сложный рисунок, полученный с использованием областей отсечения. Вертикальная полоса в середине и текст вдоль нижнего края рисунка были нарисованы до определения области отсечения, а заливка была выполнена после определения треугольной области отсечения.

Рис, 21.13, Рисование контуров выполнено до, а заливка - после определения области отсечения

Изображение на рис. 21.13 было получено с помощью метода polygon из примера 21.4 и следующего программного кода:

  // Определить некоторые графические атрибуты
  с.font = "bold 60pt sans-serif"; // Большой шрифт
  c.lineWidth = 2; // Узкие
  с.strokeStyle = "#000"; // и черные линии

  // Контур прямоугольника и текст
  с.strokeRect(175, 25, 50, 325); // Вертикальная полоса в середине
  с. strokeText("<canvas>”, 15, 330); // strokeText вместо fillText

  // Определить сложный контур, внутренняя область которого является внешней.
  polygon(c,3,200,225, 200); // Большой треугольник
  polygon(c,3,200,225,100,0,true); // Нарисовать маленький треугольник
   // в обратном направлении

  // Превратить этот контур в область отсечения.
  c.clip;

  // Нарисовать контур линиями толщиной 5 пикселов, внутри области отсечения.
  c.lineWidth = 10; // Половина этой линии толщиной 10 пикселов окажется
   // за пределами области отсечения
  с.stroke;

  // Залить область контура прямоугольника и текста, попавшую в область отсечения
  c.fillStyle = "#ааа" // Светло-серый
  с.fillRect(175, 25, 50, 325); // Залить вертикальную полосу