Стили линий в CSS3

Стили линий в CSS3.

Пока что мы использовали один и тот же стиль для всех линий на холсте. Ширину, вид окончания и другие характеристики линии можно настраивать, создавая линии в точности такого типа, какой требуется для завершения рисунка.

Для этой цели применяются четыре свойства:

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *