Использование сложных цветов: линейный градиентный цвет

В линейном градиентном цвете (или просто линейном градиенте) один простой цвет плавно переходит в другой при движении по прямой линии. Пример такого цвета — окраска заголовка окна в Windows 2000 и более поздних версиях Windows при выборе классической темы; там синий цвет плавно перетекает в белый.

Линейный градиентный цвет создают в три этапа.

Первый этап — вызов метода createLinearGradient — собственно создание линей-ного градиентного цвета:

<контекст рисования>.createLinearGradient (<горизонтальная координата начальной точки>, <вертикальная координата начальной точки>, <горизонтальная координата конечной точки>, <вертикальная координата конечной точки>)

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

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

Выражение, создающее линейный градиент, который будет "распространяться" по прямой с координатами начальной и конечной точек [0,0] и [100,50], и помещающее его в переменную lgSample:

var lgSample = ctxCanvas.createLinearGradient(0, 0, 100, 50);

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

Ключевую точку ставят, вызвав метод addColorStop объекта CanvasGradient:

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

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

Метод addColorStop не возвращает значения.

Пример:

lgSample.addColorStop(0, "black");

lgSample.addColorStop(0.4, "rgba(0, 0, 255, 0.5)");

lgSample.addColorStop(1, "#FF0000");

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

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

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

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

Третий этап — собственно использование готового линейного градиента. Для этого представляющий его экземпляр объекта CanvasGradient следует присвоить свойству strokeStyle или fillStyle. Первое свойство, как мы помним, задает цвет линий контуров, а второе — цвет заливок:

ctxCanvas.fillStyle = lgSample;

А теперь рассмотрим один важный вопрос. И рассмотрим мы его на примере созданного ранее градиента.

Задание 8: Нарисуйте на канве три прямоугольника и примените к ним линейный градиент из предыдущего примера. Первый прямоугольник нарисуйте в точке [0,0] (в начале воображаемой прямой градиента, в смысле, в его первой ключевой точке), второй — в точке [30,20] (во второй ключевой точке), третий — в точке [80,40] (в конце градиента — его третьей ключевой точке). Иначе говоря, "расставьте" наши прямоугольники во всех ключевых точках градиента.

Эти прямоугольники будут окрашены следующим образом:

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

ü Второй прямоугольник будет окрашен, в основном, в полупрозрачный синий цвет, заданный во второй ключевой точке градиента.

ü Третий прямоугольник будет окрашен, в основном, в красный цвет, заданный в третьей ключевой точке градиента.

Следовательно, созданный нами градиент не "втиснулся" в каждый из нарисованных прямоугольников целиком, а как бы зафиксировался на самой канве, а прямоугольники только "проявили" фрагменты этого градиента, соответствующие их размерам. Другими словами, градиент задается для целой канвы, а фигуры, к которым он применен, окрашиваются соответствующими его фрагментами.

Если мы захотим, чтобы какая-то фигура была окрашена градиентом полностью, придется задать для этого градиента такие координаты воображаемой прямой, чтобы он "покрыл" всю фигуру. Иначе фигура будет содержать только часть градиента.