Цвета в CSS3

Пока что мы рисовали только цветом по умолчанию — непрозрачным черным. Однако для определения любых желаемых цветов можно применять синтаксис CSS со следующими свойствами:

— strokeStyle. Определяет цвет линий фигуры;

— fillStyle. Определяет цвет внутренней области фигуры;

— globalAlpha. Описывает не цвет, а прозрачность. Устанавливает уровень прозрачности для всех фигур, которые визуализируются на холсте.

Листинг 7.4. Добавляем цвет

Function initiate(){

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

Canvas. fillStyle="#000099"; canvas. strokeStyle="#990000";

Canvas. strokeRect(100,100,120,120);

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

Canvas. clearRect(120,120,80,80);

}

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

В листинге 7.4 мы определили цвета как шестнадцатеричные значения. Но для этого также можно использовать методы, например rgb(), или даже определять степень прозрачности фигуры, как в методе rgba(). В таком случае необходимо добавлять кавычки: strokeStyle="rgba(255, 165, 0, 1)".

Когда цвет определяется посредством перечисленных методов, он становится цветом по умолчанию для всех последующих методов рисования. Помимо функции rgba() существует еще один способ настройки степени прозрачности: свойство globalAlpha. Его синтаксис таков: globalAlpha=значение, где значением может быть любое число от 0,0 (абсолютная непрозрачность) до 1,0 (абсолютная прозрачность).