- •Московский государственный университет
- •If (canvas.GetContext){
- •Рисование прямоугольников
- •Рисование составных фигур Составные фигуры состоят из нескольких соединенных простых объектов (таких как линии, круги и т.Д.)
- •Структура программы выглядит следующим образом
- •X.BeginPath();
- •X.BeginPath();
- •X.FillRect(20,20,200,200);
- •X.FillRect(50,40,55,55);
- •Папоротник
- •Гипно-спираль
- •Вставка изображений
- •4. Вложение изображения с помощью data: url
- •Рисование изображений
- •Пример 1 использования изображения
- •Масштабирование
- •Пример 2 использования изображения
- •Разрезание изображений
- •Пример 3 использования изображения
- •Пример галереи
- •Javascript графика: Объект Image.
- •Javascript графика: src и lowsrc.
- •Изменение картинки.
- •Мультипликация в JavaScript. Мультипликация.
- •Запуск мультипликации
- •Запуск и остановка мультипликации
Javascript графика: Объект Image.
Пожалуй, одной из самых интерестных и зрелищных сфер использования языка JavaScript является работа с графикой. Использование JS позволяет добиться действительно красивых эффектов и некоторые из них мы рассмотрим с вами в этом уроке:
Вся работа с графикой в JavaScript опирается на объект image, который обладает следующими свойствами:
border
complete
height
hspace
name
src
vspace
width
lowsrc
Для начала, рассмотрим пример:
<HTML>
<HEAD>
<title>Scroll text</title>
</HEAD>
<BODY>
<center>
<A HREF="javascript:void(0);" onClick="window.alert('картинка называется:'+ document.arbuz.name)">
<IMG SRC=Arbuz-100x100.jpg NAME=arbuz width="100" height="100" BORDER=0>
</A>
</BODY>
</HTML>
В данном примере мы создаем простую картинку средствами HTML и присваиваем ей некоторое имя. Далее делаем ее ссылкой, при нажатии на которую JS выдаст окно предупреждения с именем этой картинки.
Тоже самое только с использованием функции
<HTML>
<HEAD>
<title>Scroll text</title>
<script>
function namePicture(){
alert('картинка называется:'+ document.arbuz.name)
}
</script>
</HEAD>
<BODY>
<center>
<img onclick="namePicture()" src="Arbuz-100x100.jpg" NAME=arbuz width="100" height="100" BORDER=0>
</BODY>
</HTML>
Javascript графика: src и lowsrc.
Свойства src и lowsrc позволяют определить адреса изображений, используемых на странице, причем src отвечает за адрес картинки, которая будет использованна после полной загрузки, а lowsrc – за адрес картинки, которая будет показанна во время загрузки основной.
Програмист в любой момент может изменить адрес картинки используя следующий JavaScript код:
document.i2.src="new_image.gif";
где i2 – идентификатор изображения на странице, а "new_image.gif" – url адрес нового изображения
Изменение картинки.
Мы можем в реальном времени изменять картинки на странице путем присваивания атрибуту src различных значений.
Одним из наиболее распространенных способов использования этого приема является замена картинки при наведении курсора мыши:
<A HREF="javascript:void(0)"; onMouseover="document.im0.src='../img/DELENIE.png'; return true;" onMouseout="document.im0.src='../img/POLOSA_1.png'; return true;">
<IMG NAME=im0 SRC="../img/POLOSA_1.png" border=0>
</A>
Теперь при наведении мыши на изображение, оно в реальном времени будет заменено на другое и наоборот. Подобный прием используется для создания объемных эффектов, динамических интерфейсов и дружелюбных меню навигации средствами JS.
Мультипликация в JavaScript. Мультипликация.
Мультипликация JS позволяет создавать достаточно интерестные эффекты. Для мультипликации нам потребуется уже хорошо нам знакомый метод Window — setTimeout().
Теперь нам осталось определиться только со способом запуска мультипликации. Запустить мультипликацию можно любым из известных нам обработчиков событий (onLoad(); onClick();), перехватом URL и многими другими способами.
Запуск мультипликации
Сама по себе мультипликация является простой заменой картинок, происходящей по определенному условию.
Как всегда небольшой пример:
<script> i=1;
function run1(){
eval("document.i2.src='
../img/run"+i+".gif'");
i++;
if(i>3) i=1;
setTimeout("run1();",500);
}
</script> <a href="
javascript:run1();void(0);">
<img name="i2" src="
../img/run1.gif">
</a>
В нашем примере используется небольшой скрипт с условием, который при вызове начинает динамически заменять одно изображение другим с задержкой в 500 мс. Когда происходит 3я замена счетчик замен обнуляется и устанавливается изначальное изображение и т.д. до бесконечности.