HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
Шрифт:
— Первый прямоугольник будет окрашен, в основном, в черный цвет, заданный в первой ключевой точке градиента.
— Второй прямоугольник будет окрашен, в основном, в полупрозрачный синий цвет, заданный во второй ключевой точке градиента.
— Третий прямоугольник будет окрашен, в основном, в красный цвет, заданный в третьей ключевой точке градиента.
Следовательно, созданный нами градиент не "втиснулся" в каждый из нарисованных прямоугольников целиком, а как бы зафиксировался на самой канве, а прямоугольники только "проявили" фрагменты этого градиента, соответствующие их размерам. Другими словами, градиент задается
Если мы захотим, чтобы какая-то фигура была окрашена градиентом полностью, придется задать для этого градиента такие координаты воображаемой прямой, что- бы он "покрыл" всю фигуру. Иначе фигура будет содержать только часть градиента.
Листинг 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 для создания графического цвета.