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

Свойство

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

<b>&quot;48pt sans-serif”</b>

<b>&quot;bold 18рх Times Roman&quot;</b>

<b>&quot;italic 12pt monospaced&quot;</b>

<b>&quot;bolder smaller serif&quot; // жирнее и меньше, чем шрифт элемента &lt;canvas&gt;</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>&lt;canvas&gt;</b>
определить атрибут
<b>dir</b>
со значением «rtl» (right-to-left - справа налево), действие значения «start» выравнивания будет совпадать с действием значения «right», а действие значения «end» - с действием значения «left».

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

Свойство

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

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

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

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

<b>polygon()</b>
из примера 21.4 и следующего программного кода:

<b>// Определить некоторые графические атрибуты </b>

<b>с.font = &quot;bold 60pt sans-serif&quot;; // Большой шрифт </b>

<b>c.lineWidth = 2;                 // Узкие</b>

<b>с.strokeStyle = &quot;#000&quot;;          // и черные линии</b>

<b>// Контур прямоугольника и текст</b>

<b>с.strokeRect(175, 25, 50, 325);     // Вертикальная полоса в середине</b>

<b>с. strokeText(&quot;&lt;canvas&gt;”, 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>