Лабораторные работы МИРЭА JavaScript (1017114), страница 15
Текст из файла (страница 15)
</body>
</html>
Смещение канвы
В некоторых случаях приходится указывать участок экрана, на котором будет размещаться канва
<html>
<head>
<canvas id="myCanvas" width="500" height="500" style="position: absolute; top:10px; margin: 0px; border: 2px solid black;">
Ваш браузер не поддерживает Canvas.
</canvas>
<script type='text/javascript'>
myCanvas.style.top = "200px";
myCanvas.style.left = "200px";
// Контекст для работы
var ctx = document.getElementById("myCanvas").getContext("2d");
var img1 = new Image();
img1.src = 'd:/MySite/forest.jpg';
function drawPoligon(){
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(470,470);
ctx.lineTo(20,470);
ctx.closePath();
ctx.clip();
ctx.rotate(0.5);
ctx.drawImage(img1,0,0);
}
</script>
</head>
<body onload='drawPoligon()'>
</body>
</html>
Задание на выполнение лабораторной работы
1. Создать прямоугольное изображение с изменяющимися во времени размерами.
2. Создать изображение оганиченное окружностью с изменяющимся во времени диаметром.
3. Создать вращающееся изображение вокруг собственной оси.
4. Создать изображение вращающееся вокруг верикальной оси.
Использованные источники
http://html5insight.ru/
Работа с графикой
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я замена счетчик замен обнуляется и устанавливается изначальное изображение и т.д. до бесконечности.
Запуск и остановка мультипликации
Уметь запустить мультипликацию конечно хорошо, но нередко возникает необходимость управлять воспроизведением мультипликации. Например создание слайд–шоу на вашей странице, которое может быть запущенно и остановленно путем нажатия на различные элементы управления.
Рассмотрим простой пример, реализующий управление воспроизведением анимации:
<script>
i=1;
flag=0;
function run3()
{
if (flag==0)
{
eval("document.i3.src='
../img/run"+i+".gif'");
i++;
if(i>3) i=1;
}
setTimeout("run3();",500);
}
</script>
<form >
<input type="button"
onClick="if (flag==0) flag=1;
else flag=0"
value="остановить/возобновить">
</form>
<a href="javascript:run3();
void(0);">
<img name="i3" src="
../img/run1.gif">
</a>
В нашем примере мы создаем дополнительную кнопку изменяющую переменную flag с 0 на 1 при нажатии. И немного доработали наш скрипт. Теперь внутри скрипта происходит проверка условия равна ли переменная flag 0 и если равна, то происходит отображение анимации, а если нет то картинка остается статической.
Конечно это далеко не единственный способ управления мультипликацией. Ведь например, можно использовать метод clearTimeout().
Как вы и сами прекрасно понимаете при помощи этого метода можно уничтожить порождение потоков вычислений, заставляющих бесконечно много раз повторяться цикл, тем самым остановив мультипликацию.
Источники
http://www.seoded.ru/beginner/soderg.html
109
![](https://s.studizba.com/z.php?f=/templates/si/i/noavatar.png&w=100&h=100&t=1"){kind=avatar}
