Главное меню

Радиальный градиентный цвет

Радиальный градиентный цвет (радиальный градиент) описывается двумя вложенными друг в друга окружностями. "Распространяется" он из внутренней окружности по направлению к внешней во все стороны. Ключевые точки такого градиента расставлены между этими окружностями.

Радиальный градиентный цвет также создают в три этапа.

Первый этап – вызов метода createRadialGradient – создание радиального градиентного цвета:

<контекст рисования>.createRadialGradient

(<горизонтальная координата центра внутренней окружности>,

<вертикальная координата центра внутренней окружности>,

<радиус внутренней окружности>,

<горизонтальная координата центра внешней окружности>,

<вертикальная координата центра внешней окружности>,

<радиус внешней окружности>)

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

Метод createRadialGradient возвращает экземпляр объекта CanvasGradient, представляющий созданный нами радиальный градиент.

Пример:

var rgSample = ctxCanvas.createRadialGradient(100, 100, 10, 150, 100, 120);

Это выражение создает радиальный градиент и помещает его в переменную rgSample. Созданный градиент будет "распространяться" от внутренней окружности, центр которой находится в точке с координатами [100,100], а радиус равен 10 пикселам, к внешней окружности с центром в точке [150,100] и радиусом 120 пикселов.

Второй этап – расстановка ключевых точек – выполняется с помощью уже знакомого нам метода addColorStop объекта CanvasGradient:

<градиент>.addColorStop(<положение ключевой точки>, <цвет>)

Первый параметр определяет относительное положение создаваемой ключевой точки на промежутке между внутренней и внешней окружностями. Он задается в виде числа от 0.0 (начало промежутка, т. е. внутренняя окружность) до 1.0 (конец промежутка, т. е. внешняя окружность). Второй параметр, как мы уже знаем, задает цвет, который должен присутствовать в данной ключевой точке.

Как и линейный градиент, радиальный может содержать сколько угодно ключевых точек.

Пример:

rgSample.addColorStop(0, "#CCCCCC");

rgSample.addColorStop(0.8, "black");

rgSample.addColorStop(1, "#00FF00");

Этот Web-сценарий создает на полученном нами ранее радиальном градиенте три ключевые точки:

• расположенную в начальной точке воображаемого промежутка между окружностями (т. е. на внутренней окружности) и задающую серый цвет;

• расположенную в точке, отстоящей на 80% длины воображаемого промежутка между окружностями от его начальной точки, и задающую черный цвет;

• расположенную в конечной точке воображаемого промежутка между окружностями (т. е. на внешней окружности) и задающую зеленый цвет.

Третий этап – использование готового радиального градиента – выполняется так же, как для линейного градиента, т. е. присваиванием его свойству strokeStyle или fillStyle:

ctxCanvas.fillStyle = rgSample;

Радиальный градиент ведет себя точно так же, как линейный – фиксируется на канве и частично "проявляется" на фигурах, к которым применен.

Листинг 22.10 иллюстрирует пример.

Радиальный градиентный цвет

Web-сценарий из листинга 22.10 рисует прямоугольник и заполняет его радиальным градиентом, аналогичным созданному ранее в этом разделе. Отметим, что центры внутренней и внешней окружностей, описывающих этот градиент, различаются, за счет чего достигается весьма примечательный эффект, который лучше видеть своими глазами.