Свойство
<b>font</b>
определяет шрифт, который будет использоваться для рисования текста. Значение этого свойства должно быть строкой с соблюдением синтаксиса CSS-атрибута
<b>font</b>
. Например:
<b>"48pt sans-serif”</b>
<b>"bold 18рх Times Roman"</b>
<b>"italic 12pt monospaced"</b>
<b>"bolder smaller serif" // жирнее и меньше, чем шрифт элемента <canvas></b>
Свойство
<b>textAlign</b>
определяет способ выравнивания текста по горизонтали с учетом координаты X, переданной методу
<b>fillText()</b>
или
<b>strokeText().</b>
Свойство
<b>textBaseline</b>
определяет способ выравнивания текста по вертикали с учетом координаты Y. На рис. 21.12 показано действие всех допустимых значений этих свойств. Тонкая линия рядом с каждой строкой текста - это опорная линия шрифта, а маленький квадратик обозначает точку (х.у), координаты которой были переданы методу
<b>fillText().</b>
По умолчанию свойство
<b>textAlign</b>
имеет значение «start». Обратите внимание, что для текста, который записывается слева направо, выравнивание, определяемое значением «start», совпадает с выравниванием, определяемым значением «left»,
аналогично совпадает и действие значений «end» «right». Однако если в элементе
<b><canvas></b>
определить атрибут
<b>dir</b>
со значением «rtl» (right-to-left - справа налево), действие значения «start» выравнивания будет совпадать с действием значения «right», а действие значения «end» - с действием значения «left».
Свойство
<b>textBaseline</b>
по умолчанию имеет значение «alphabetic», которое соответствует алфавиту Latin и подобным ему. Значение «ideographic» используется совместно с идеографическими алфавитами, такими как китайский и японский. Значение «hanging» предназначено для использования со слоговыми и подобными им алфавитами (которые используются во многих языках в Индии). Значения «top», «middle» и «bottom» определяют исключительно геометрическое положение опорной линии шрифта, исходя из размеров «кегельной площадки» шрифта.
Методы
<b>fillText()</b>
и
<b>strokeText()</b>
принимают четвертый необязательный аргумент. Этот аргумент определяет максимальную ширину отображаемого текста. Если текст окажется шире указанного значения, при заданном значении свойства
<b>font</b>
будет выполнено его масштабирование или будет использован более узкий или более мелкий шрифт.
Если вам потребуется узнать размеры текста до его вывода, передайте его методу
<b>measureText().</b>
Этот метод возвращает объект
<b>TextMetrics</b>
, определяющий размеры для текущего значения свойства
<b>font</b>
. На момент написания этих строк объект
<b>TextMetrics</b>
позволял определить только ширину текста. Определить ширину текстовой строки на экране можно следующим образом:
<b>var width = c.measureText(text).width;</b>
21.4.10. Отсечение
После определения контура обычно вызывается метод
<b>stroke()</b>
или
<b>fill()</b>
(или оба). Можно также вызвать метод
<b>clip(),</b>
чтобы определить область отсечения. После того как область отсечения будет определена, рисование будет выполняться только в ее пределах. На рис. 21.13 изображен сложный рисунок, полученный с использованием областей отсечения. Вертикальная полоса в середине и текст вдоль нижнего края рисунка были нарисованы до определения области отсечения, а заливка была выполнена после определения треугольной области отсечения.
Рис, 21.13, Рисование контуров выполнено до, а заливка - после определения области отсечения
Изображение на рис. 21.13 было получено с помощью метода
<b>polygon()</b>
из примера 21.4 и следующего программного кода:
<b>// Определить некоторые графические атрибуты </b>
<b>с.font = "bold 60pt sans-serif"; // Большой шрифт </b>
<b>c.lineWidth = 2; // Узкие</b>
<b>с.strokeStyle = "#000"; // и черные линии</b>
<b>// Контур прямоугольника и текст</b>
<b>с.strokeRect(175, 25, 50, 325); // Вертикальная полоса в середине</b>
<b>с. strokeText("<canvas>”, 15, 330); // strokeText() вместо fillText()</b>
<b>// Определить сложный контур, внутренняя область которого является внешней.</b>
<b>polygon(c,3,200,225, 200); // Большой треугольник</b>
<b>polygon(c,3,200,225,100,0,true); // Нарисовать маленький треугольник</b>
<b> // в обратном направлении</b>
<b>// Превратить этот контур в область отсечения. </b>
<b>c.clip();</b>
<b>// Нарисовать контур линиями толщиной 5 пикселов, внутри области отсечения. </b>
<b>c.lineWidth = 10; // Половина этой линии толщиной 10 пикселов окажется </b>
<b> // за пределами области отсечения</b>
<b>с.stroke();</b>
<b>// Залить область контура прямоугольника и текста, попавшую в область отсечения</b>