Градиенты в CSS3

Градиенты — неотъемлемая составляющая любой современной программы рисования, и холсты HTML5 не исключение. Так же как в CSS3, градиенты на холсте могут быть линейными или радиальными, кроме того, разработчик может определить несколько цветовых остановок, создав плавные переходы между множеством цветов:

— createLinearGradient(x1, y1, x2, y2). Создает объект градиента для последующей визуализации на холсте;

— createRadialGradient(x1, y1, r1, x2, y2, r2). Создает для последующей визуализации на холсте объект градиента, состоящий из двух окружностей. Значения в скобках представляют собой координаты центров окружностей и их радиусы;

— addColorStop(position, color). Определяет цвета, которые будут использоваться для создания градиента. Атрибут position — это значение от 0,0 до 1,0, определяющее, в какой позиции начнется затухание цвета color.

Листинг 7.5. Наложение линейного градиента на холст

Function initiate(){

Var elem=document. getElementById(‘canvas’); canvas=elem. getContext(‘2d’);

Var grad=canvas. createLinearGradient(0,0,10,100); grad. addColorStop(0.5, ‘#0000FF’); grad. addColorStop(1, ‘#000000’); canvas. fillStyle=grad;

Canvas. fillRect(10,10,100,100);

Canvas. fillRect(150,10,200,100);

}

Window. addEventListener("load", initiate, false);

В листинге 7.5 мы создали градиент, распространяющийся от точки (0, 0) до точки (10, 100) с небольшим наклоном влево. Для определения цветов использовали метод addColorStop(), а для итогового применения градиента в качестве стиля заливки — свойство fillStyle (так же, как для любого другого цвета).

Обратите внимание на то, что позиция градиента определяется относительно холста, а не фигур, для заливки которых этот градиент затем используется. Таким образом, если в конце кода вы переместите прямоугольники на новое место, градиент внутри них станет выглядеть по-другому.

Радиальный градиент для холста определяется аналогично тому, как мы это делали в правилах CSS3. Попробуйте заменить линейный градиент в коде из листинга 7.5 радиальным градиентом, используя выражение, подобное createRadialGradient(0, 0, 30, 0, 0, 300). Также вы можете поэкспериментировать с местоположением прямоугольников, чтобы посмотреть, каким образом градиент будет визуализироваться в каждой новой позиции.