Книга: JavaScript. Подробное руководство, 6-е издание
21.4.8. Атрибуты рисования линий
21.4.8. Атрибуты рисования линий
Вы уже знакомы со свойством lineWidth
, которое определяет толщину линий, рисуемых методами stroke()
и strokeRect(). Кроме свойства lineWidth
(и конечно же, strokeStyle
) существует еще три графических атрибута, влияющих на рисование линий.
По умолчанию свойство lineWidth
имеет значение 1, и ему можно присвоить любое положительное целое число, и даже дробное число меньше 1. (Линии толщиной менее одного пиксела рисуются полупрозрачными цветами, поэтому они выглядят менее темными по сравнению с линиями толщиной в 1 пиксел). Чтобы полностью понять действие свойства lineWidth
, представьте контур как комбинацию бесконечно тонких одномерных линий. Прямые линии и кривые, рисуемые методом stroke(),
центрируются по этому контуру, выступая на половину lineWidth
в обе стороны. Если при рисовании замкнутого контура необходимо, чтобы видимы были только части линий за пределами контура, нарисуйте сначала контур, а затем залейте его непрозрачным цветом, чтобы скрыть части линий, которые вторгаются внутрь контура. Или, если необходимо, чтобы видимы были только части линий внутри замкнутого контура, вызовите сначала методы save()
и clip()
(раздел 21.4.10), а затем методы stroke()
и restore().
Из-за имеющейся возможности изменять масштаб по осям координат, как показано на рис. 21.7, толщина линий зависит от текущего преобразования. Если выполнить вызов scale(2,1),
чтобы изменить масштаб по оси X и оставить нетронутым масштаб по оси Y, вертикальные линии будут получаться в два раза толще горизонтальных, нарисованных с одним и тем же значением свойства lineWidth
. Важно понимать, что толщина линий определяется значением свойства lineWidth
и текущим преобразованием, имевшимися на момент вызова метода stroke(),
а не на момент вызова метода lineТо()
или другого метода конструирования контура.
Три других атрибута рисования линий определяют внешний вид несоединенных концов контура и вершин, где соединяются два фрагмента контура. Они оказывают весьма несущественное влияние на внешний вид тонких линий, но обеспечивают существенные отличия при рисовании толстых линий. Действие двух этих свойств иллюстрируется изображением на рис. 21.11. Здесь контур показан как тонкая черная линия, а результат рисования линий - как окружающая ее серая область.
Свойство lineCap
определяет, как будут выглядеть концы незамкнутых фрагментов контуров. Значение «butt» (по умолчанию) соответствует завершению линий непосредственно в конечной точке. При значении «square» линия будет продолжена за конечную точку на половину толщины и будет иметь квадратный конец. А при значении «round» линия будет продолжена за конечную точку на половину толщины и будет иметь закругленный конец (с радиусом закругления в половину толщины линии).
Свойство lineJoin
определяет внешний вид вершин, соединяющих фрагменты контура. По умолчанию это свойство имеет значение «miter», при котором внешние края линий двух фрагментов контура будут продолжены, пока они не встретятся. При значении «round» вершины получают закругленную форму, а при значении «bevel» вершины обрезаются прямыми линиями.
Последнее свойство, связанное с рисованием линий, - это свойство miterLimit
, которое используется, только когда свойство lineJoin
имеет значение «miter». Когда две линии соединяются под острым углом, сопряжение между ними может оказаться довольно протяженным, и эти протяженные сопряжения могут нарушать визуальную гармонию. Свойство miterLimit
определяет верхнюю границу протяженности сопряжений. Если сопряжение в некоторой вершине оказывается длиннее половины длины линии, умноженной на значение miterLimit
, эта вершина будет нарисована с обрезанным сопряжением.
- 21.4.1. Рисование линий и заливка многоугольников
- 21.4.2. Графические атрибуты
- 21.4.3. Размеры и система координат холста
- 21.4.4. Преобразование системы координат
- 21.4.5. Рисование и заливка кривых
- 21.4.6. Прямоугольники
- 21.4.7. Цвет, прозрачность, градиенты и шаблоны
- 21.4.8. Атрибуты рисования линий
- 21.4.9. Текст
- 21.4.10. Отсечение
- 21.4.11. Тени
- 21.4.12. Изображения
- 21.4.13. Композиция
- 21.4.14. Манипулирование пикселами
- 21.4.15. Определение попадания
- 21.4.16. Пример использования элемента : внутристрочные диаграммы
- 21.4.2. Графические атрибуты
- Рис. 49. Атрибуты файла.
- 17.6. Отрисовка линий
- 1.3.5. Методы и атрибуты
- 2. Домены и атрибуты
- 4. Виртуальные атрибуты
- Рисование фигур и линий
- Рисование линий и фигур
- Инструменты рисования
- У файла и каталога есть атрибуты (например: Скрытый, Только чтение). Как ими управлять из командной строки?
- Советы для эффективного рисования
- 20.2.1. Атрибуты cookie: срок хранения и область видимости