Шаг 42.
Основы CSS.
Фильтр light

    На этом шаге мы рассмотрим фильтр light.

    Фильтр light добавляет к изображению источник света. Пожалуй, самый интересный фильтр, так как имеет лишь единственное свойство enabled и много методов, которые позволяют создавать различные световые эффекты.

    Методы, применяемые к этому фильтру:

    Enabled - свойство, разрешающее применение фильтра. Имеет два значения:


    Замечание. Свойство 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; 
} 


    Замечания.

    На следующем шаге мы рассмотрим фильтры mask, shadow и xray.




Предыдущий шаг Содержание Следующий шаг