Пока что мы использовали один и тот же стиль для всех линий на холсте. Ширину, вид окончания и другие характеристики линии можно настраивать, создавая линии в точности такого типа, какой требуется для завершения рисунка.
Для этой цели применяются четыре свойства:
— lineWidth. Определяет толщину линии. Значение по умолчанию единица;
— lineCap. Определяет форму окончания линии. Оно может принимать одно из трех значений: butt, round или square;
— lineJoin. Определяет форму соединения двух линий. Возможные значения: round, bevel и miter;
— miterLimit. Используется совместно со свойством lineJoin и определяет протяженность соединения двух линий в случае, если свойству lineJoin присвоено значение miter.
Перечисленные свойства влияют на весь путь. После каждого изменения характеристик линии необходимо создавать новый путь с новыми значениями свойств.
Листинг 7.14. Тестируем свойства линий
Function initiate(){
Var elem=document. getElementById(‘canvas’);
Canvas=elem. getContext(‘2d’);
Canvas. beginPath();
Canvas. arc(200,150,50,0,Math. PI*2, false); canvas. stroke();
Canvas. lineWidth=10; canvas. lineCap="round";
Canvas. beginPath();
Canvas. moveTo(230,150);
Canvas. arc(200,150,30,0,Math. PI, false);
Canvas. stroke();
Canvas. lineWidth=5;
Canvas. lineDoin="miter";
Canvas. beginPath();
Canvas. moveTo(195,135);
Canvas. lineTo(215,155);
Canvas. lineTo(195,155);
Canvas. stroke();
}
В коде 7.14 мы начали рисование с создания пути со свойствами по умолчанию, определяющего полный круг. Затем, используя lineWith, установили новую ширину линии, равную 10 единицам, а свойству lineCap присвоили значение round. Таким образом, следующий путь стал толще и со скругленными окончаниями. Для визуализации этого пути мы переместили перо в точку (230, 150) и создали полукруг. Скругленные окончания помогают создать иллюзию улыбающегося рта.
Наконец, мы добавили на холст еще один путь, включающий в себя две линии и напоминающий по форме нос. Обратите внимание на то, что ширина линий этого пути равна 5 единицам, а для определения формы их соединения мы присвоили свойству lineJoin значение miter. Благодаря этому нос получается заостренным: внешние края угла в точке соединения вытягиваются и сходятся в одну точку.
Поэкспериментируйте со свойствами линий носа. Например, определите значение свойства miterLimit, добавив инструкцию miterLimit=2. Поменяйте значение свойства lineJoin на round или bevel. Можете также попробовать изменить форму рта, использовав другие значения свойства lineCap.
Текст
Для того чтобы добавить на холст какой-то текст, нужно всего лишь определить несколько свойств и вызвать подходящий метод. Для настройки текста используются три свойства:
— font. Синтаксис этого свойства аналогичен синтаксису свойства font из CSS, и оно принимает такие же значения;
— textAlign. У этого свойства несколько допустимых значений. Возможные варианты выравнивания описываются значениями start, end, left, right и center;
— textBaseline. Предназначено для настройки выравнивания по вертикали. Устанавливает позицию текста (включая текст в кодировке Unicode). Возможные значения: top, hanging, middle, alphabetic, ideographic и bottom.
Для вывода текста на холст используются два метода:
— strokeText(text, x, y). Аналогично методам для рисования пути, выводит на холст в точке (x, y) переданный ему в первом параметре текст, превращая его в контурную фигуру. В список параметров можно добавить и четвертое значение, определяющее максимальный размер. Если текст длиннее этого значения, то он сжимается, чтобы полностью поместиться в пространстве указанного размера;
— fillText(text, x, y). Аналогичен предыдущему, но визуализирует текст как залитые цветом фигуры.
Листинг 7.15. Рисование текста
Function initiate(){
Var elem=document. getElementById(‘canvas’); canvas=elem. getContext(‘2d’);
Canvas. font="bold 24px verdana, sans-serif"; canvas. textAlign="start"; canvas. fillText("my message", 100,100);
}
Window. addEventListener("load", initiate, false);
Как видно из листинга 7.15, свойству font можно передавать одновременно несколько значений, а его синтаксис аналогичен синтаксису свойства font из CSS. Свойство textAling определено таким образом, чтобы очередная порция текста выводилась на холст, начиная с точки (100, 100) (если бы, например, мы присвоили данному свойству значение end, то текст заканчивался бы в позиции (100, 100)). Наконец, метод fillText визуализирует текст на холсте, заливая его сплошным цветом.
Листинг 7.16. Измерение текста
Function initiate(){
Var elem=document. getElementById(‘canvas’); canvas=elem. getContext(‘2d’);
Canvas. font="bold 24px verdana, sans-serif";
Canvas. textAlign="start";
Canvas. textBaseline="bottom";
Canvas. fillText("My message", 100,124);
Var size=canvas. measureText("My message");
Canvas. strokeRect(100,100,size. width,24);
}
Window. addEventListener("load", initiate, false);
Помимо методов, перечисленных ранее, этот API предоставляет еще один важный метод, предназначенный для работы с текстом, — measureText(). Он возвращает информацию о размере указанного текста. Его полезно применять в случаях, когда текст комбинируется с другими фигурами на холсте, а также для вычисления точных позиций элементов и даже для создания столкновений в анимированных рисунках.
Здесь мы начинаем с того же кода, который использовали в листинге 7.15, но добавляем выравнивание по вертикали. Свойству textBaseline присваивается значение bottom, и это означает, что координата нижнего края текста равна 124 пикселам. Таким образом, мы точно знаем, на каком уровне по вертикали текст находится на холсте.
Благодаря методу measureText() и свойству width мы узнаем размер текста по горизонтали. Выполнив все необходимые измерения, рисуем аккуратный прямоугольник точно вокруг текста.
Используя код из листинга 7.16, протестируйте разные значения свойств textAlign и textBaseline. Ориентируйтесь на прямоугольник: его размер будет автоматически подгоняться к размеру текста.
Добавить комментарий