Шаг 42.
Основы CSS.
Фильтр light
На этом шаге мы рассмотрим фильтр light.
Фильтр light добавляет к изображению источник света. Пожалуй, самый интересный фильтр, так как имеет
лишь единственное свойство enabled и много методов, которые позволяют создавать различные световые
эффекты.
Методы, применяемые к этому фильтру:
- AddAmbient (<число_красный>, <число_зеленый>, <число_синий>, <число_интенсивность>) - добавляет
источник рассеянного света с заданными цветовыми параметрами. Первые три параметра задают, соответственно,
насыщенность красной, зеленой и синей составляющей света и изменяются в диапазоне от 0 до 255. Последний
параметр определяет интенсивность источника;
- AddCone (<коорд_x1>, <коорд_y1>, <коорд_z1>, <коорд_x2>, <коорд_y2>, <число_красный>, <число_зеленый>, <число_синий>, <число_интенсивность>, <число_угол>) -
добавляет конический источник направленного света с заданными цветовыми параметрами. Первые два параметра
задают координаты источника света, третий - номер слоя источника света, следующие два - координаты
точки направления света. Следующие три параметра - насыщенность соответствующих цветовых составляющих.
Предпоследний параметр определяет интенсивность источника света, а последний угол конуса распространения света.
Прямая, проходящая через точку источника света и точку направления света, является биссектрисой этого угла;
- AddPoint (<коорд_x>, <коорд_y>, <коорд_z>, <число_красный>, <число_зеленый>, <число_синий>, <число_интенсивность>) - добавляет
источник направленного света с заданными цветовыми параметрами. Первые два параметра определяют координаты
источника света, а следующий определяет номер слоя источника света;
- ChangeColor (<номер>, <число_красный>, <число_зеленый>, <число_синий>, 1|0) - изменяет
цвет источника света с заданным номером на указанный цвет. Последний параметр указывает, будет
абсолютное (1) или относительное (0) изменение цвета;
- ChangeStrength (<номер>, <число_интенсивность>,1|0) - изменяет интенсивность
света источника с заданным номером. Последний параметр указывает, будет абсолютное (1) или относительное
(0) изменение интенсивности;
- Clear() - удаляет все источники света;
- MoveLight (<номер>, <коорд_x>, <коорд_y>, <коорд_z>, 1|0) - перемещает
источник света с заданным номером в место с заданными координатами. Последний параметр указывает, будет
абсолютное (1) или относительное (0) перемещение.
Enabled - свойство, разрешающее применение фильтра. Имеет два значения:
- true (по умолчанию) - разрешает применить фильтр;
- false - использование фильтра запрещено.
Замечание.
Свойство Enabled имеется у всех фильтров.
Все источники добавляются только из встроенного сценария.
Следующие рисунки иллюстрируют использование этого фильтра.
Рис.1. Рассеянный источник красного (наведите на рисунок курсор мыши)
Рис.2. Конический источник (наведите на рисунок курсор мыши)
Рис.3. Точечный источник света (наведите на рисунок курсор мыши)
Вот тексты функций:
/*Для первого рисунка*/
function change()
{
document.all.img1.style.filter="light();"
document.all.img1.filters.light.enabled=true;
document.all.img1.filters.light.addAmbient(255,0,0,255);
}
function change1()
{
document.all.img1.filters.light.enabled=false;
}
/*Для второго рисунка*/
function change2()
{
var iX2=img2.offsetWidth/2;
var iY2=img2.offsetHeight/2;
document.all.img2.style.filter="light();"
document.all.img2.filters.light.enabled=true;
document.all.img2.filters.light.addCone(0,0,3,iX2,iY2,255,255,255,255,20);
}
function change3()
{
document.all.img2.filters.light.enabled=false;
}
/*Для третьего рисунка*/
function change4()
{
var iX3=img3.offsetWidth/2;
var iY3=img3.offsetHeight/2;
document.all.img3.style.filter="light();"
document.all.img3.filters.light.enabled=true;
document.all.img3.filters.light.addPoint(iX3,iY3,3,255,255,255,255);
}
function change5()
{
document.all.img3.filters.light.enabled=false;
}
Замечания.
- При добавлении фильтра light() в параметре style область отображения элемента становится черной, чтобы можно было видеть эффекты конического и точечного источников света.
- Точечный источник света может представлять собой один пиксель, если не подобран его цвет и цвет элемента. Лучше всего этот источник света виден на белом фоне.
На следующем шаге мы рассмотрим фильтры mask, shadow и xray.
Предыдущий шаг
Содержание
Следующий шаг