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

Флэнаган Дэвид
Шрифт:

// Линейный градиент, по диагонали холста (предполагается, что преобразования отсутствуют)

var bgfade = с.createLinearGradient(0,0,canvas.width,canvas.height);

bgfade.addColorStop(0.0, "#88f”); // От светло-синего вверху слева

bgfade.addColorStop(1.0, "#fff"); // До белого внизу справа

// Градиент между двумя концентрическими окружностями. Прозрачный в середине

// до полупрозрачного серого и опять до прозрачного,

var peekhole = с.createRadialGradient(300,300,100, 300,300,300);

peekhole.addColorStop(0.0, "transparent"); // Прозрачный

peekhole.addColorStop(0.7, "rgba(100,100,100,.9)"); // Полупрозрачный серый

peekhole.addColorStop(1.0, "rgba(0,0,0,0)"); // Опять прозрачный

Важно понимать, что градиенты тесно связаны с местоположением в холсте. При создании градиента вы указываете его границы. Если после этого попытаться выполнить заливку области за этими границами, будет использован сплошной цвет, соответствующий одному или другому концу градиента. Если, к примеру, вы определите градиент вдоль линии, соединяющей точки (0,0) и (100, 100), этот градиент можно будет использовать только для заливки объектов, находящихся внутри прямоугольной области (0,0,100,100).

Рисунок, изображенный на рис. 21.10, был создан с использованием шаблона pattern и градиентов bgfade и peekhole с помощью следующего программного кода:

c.fillStyle = bgfade; // Сначала использовать линейный градиент

с.fillRect(0,0,600,600); // Залить весь холст

с.strokeStyle = pattern; // Использовать шаблон для рисования линий

c.lineWidth = 100; // Очень толстые линии

с.strokeRect(100,100,400,400); // Нарисовать большой квадрат

c.fillStyle = peekhole; // Использовать радиальный градиент

с.fillRect(0,0,600,600); // Покрыть холст этой полупрозрачной заливкой

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