HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

радиальный градиент. Они задаются в пикселах в виде чисел.

Метод 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 имеет небольшие