Ранее для линий и заливок у нас были только простые, однотонные, цвета. Настала пора познакомиться со средствами канвы для создания и использования сложных цветов: градиентных и графических.
В линейном градиентном цвете (или просто линейном градиенте) один простой цвет плавно переходит в другой при движении по прямой линии. Пример такого цвета — окраска заголовка окна в 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 рисует прямоугольник и заполняет его линейным градиентом, аналогичным созданному ранее в этом разделе. Попробуйте изменить координаты и размеры рисуемого прямоугольника и посмотрите, какая часть градиента в нем появится.
Радиальный градиентный цвет (радиальный градиент) описывается двумя вложенными друг в друга окружностями. "Распространяется" он из внутренней окружности по направлению к внешней во все стороны. Ключевые точки такого градиента расставлены между этими окружностями.
Радиальный градиентный цвет также создают в три этапа.
Первый этап — вызов метода 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 иллюстрирует пример.
Листинг 22.10
var rgSample = ctxCanvas.createRadialGradient(100, 100, 10, 150, 100, 120);
rgSample.addColorStop(0, "#CCCCCC");
rgSample.addColorStop(0.8, "black");
rgSample.addColorStop(1, "#00FF00");
ctxCanvas.fillStyle = rgSample;
ctxCanvas.fillRect(0, 0, 200, 200);
Web-сценарий из листинга 22.10 рисует прямоугольник и заполняет его радиальным градиентом, аналогичным созданному ранее в этом разделе. Отметим, что центры внутренней и внешней окружностей, описывающих этот градиент, различаются, за счет чего достигается весьма примечательный эффект, который лучше видеть своими глазами.
Графический цвет — это обычное графическое изображение, которым закрашиваются линии или заливки. Таким графическим изображением может быть содержимое как обычного графического файла, так и другой канвы.
Графический цвет создают в три этапа.
Первый этап необходим только в том случае, если мы используем в качестве цвета содержимое графического файла. Файл нужно как-то загрузить, удобнее всего — с помощью объекта Web-обозревателя Image, который представляет графическое изображение, хранящееся в файле.
Сначала с помощью знакомого нам по главе 14 оператора new нам потребуется создать экземпляр объекта Image:
var imgSample = new Image();
Объект Image поддерживает свойство src, задающее интернет-адрес загружаемого графического файла в виде строки. Если присвоить этому свойству интернет-адрес какого-либо файла, данный файл тотчас будет загружен:
imgSample.src = "graphic_color.jpg";
В дальнейшем мы можем использовать данный экземпляр объекта Image для создания графического цвета.
Второй этап — собственно создание графического цвета с помощью метода createPattern:
<контекст рисования>.createPattent(<графическое изображение или канва>,<режим повторения>)
Первый параметр задает графическое изображение в виде экземпляра объекта Image или канву в виде экземпляра объекта HTMLCanvasElement.
Часто бывает так, что размеры заданного графического изображения меньше, чем фигуры, к которой должен быть применен графический цвет. В этом случае изображение повторяется столько раз, чтобы полностью "вымостить" линию или заливку. Режим такого повторения задает второй параметр метода createPattern. Его значение должно быть одной из следующих строк:
— "repeat" — изображение будет повторяться по горизонтали и вертикали;
— "repeat-x" — изображение будет повторяться только по горизонтали;
— "repeat-y" — изображение будет повторяться только по вертикали;
— "no-repeat" — изображение не будет повторяться никогда; в этом случае часть фигуры останется не занятой им.
Метод createPattern возвращает экземпляр объекта CanvasPattern, представляющий созданный нами графический цвет:
var cpSample = ctxCanvas.createPattern(imgSample, "repeat");
Третий этап — использование готового графического цвета — выполняется так же, как для градиентов, т. е. присваиванием его свойству strokeStyle или fillStyle.
Пример:
ctxCanvas.fillStyle = cpSample;
ctxCanvas.fillRect(0, 0, 200, 100);
Этот Web-сценарий рисует прямоугольник с заливкой на основе созданного нами ранее графического цвета.
Графический цвет не фиксируется на канве, а полностью применяется к рисуемой фигуре. В этом его принципиальное отличие от градиентов.
НА ЗАМЕТКУ
В приведенном ранее примере мы предположили, что файл graphic_color.jpg имеет небольшие размеры или уже присутствует в кэше Web-обозревателя и поэтому загрузится очень быстро. Но если он, так сказать, "задержится в пути", Web-сценарий не выполнится. Поэтому изображения, хранящиеся в других файлах, выводятся по иной методике, которую мы скоро рассмотрим.