Использование сложных цветов

Использование сложных цветов

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

Линейный градиентный цвет

В линейном градиентном цвете (или просто линейном градиенте) один простой цвет плавно переходит в другой при движении по прямой линии. Пример такого цвета — окраска заголовка окна в 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;

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

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

Как будут окрашены эти прямоугольники? Давайте посмотрим.

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

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

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

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

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

Листинг 22.9

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

lgSample.addColorStop(0, "black"); lgSample.addColorStop(0.4, "rgba(0, 0, 255, 0.5)"); lgSample.addColorStop(1, "#FF0000"); ctxCanvas.fillStyle = lgSample;

ctxCanvas.fillRect(0, 0, 200, 100);

Web-сценарий из листинга 22.9 рисует прямоугольник и заполняет его линейным градиентом, аналогичным созданному ранее в этом разделе. Попробуйте изменить координаты и размеры рисуемого прямоугольника и посмотрите, какая часть градиента в нем появится.