Опубликован: 01.08.2012 | Уровень: для всех | Доступ: платный | ВУЗ: Томский политехнический университет
Практическая работа 10:

Canvas. Анимация

< Практическая работа 9 || Практическая работа 10: 12
Аннотация: Целью занятия является знакомство с простейшей анимацией в canvas (холст).

Следующие действия необходимо сделать чтобы нарисовать кадр.

  1. Отчистить холст. Самый простой способ сделать это состоит в методе clearRect.
  2. Сохранить состояние холста. Если вы меняете любые параметры (стили, преобразования и т.д.), которые влияют на состояние холста и хотите, чтобы исходное состояние использовалось каждый раз, когда кадр рисуется, необходимо его сохранить.
  3. Нарисовать анимированые фигуры. Фактически это шаг создания кадра.
  4. Востановление состояния холста. Если вы сохранили состояние холста, восстановите его, прежде чем делать новые кадры.

Рассмотрим два несложных примера по отображению анимированного изображения на холсте.

Пример 1

Для начала, просто изобразим движущийся квадрат. Функция createImage вызывается при загрузке тела HTML документа. В самой функции также определена доп. функция animation, которая, непосредственно, отрисовывает "кадры", рекурсивно, вызывая саму себя.

В рамках функции animation осуществляется следующая последовательность действий:

  1. Очистка холста.
  2. Отрисовка закрашенного квадрата.
  3. Изменение координаты левого верхнего угла квадрата по - горизонтали, для "смещения" квадрата на следующем шаге.
  4. В случае, если наш квадрат дойдет до края холста, то начальное значение координаты x вернется к нулю.
  5. Рекурсивный вызов animation, посредством метода setTimeout (см. http://javascript.ru/setTimeout).
function createImage() 
 {
 var ctx = document.getElementById('lesson10').getContext('2d');
 var x = 0;
 function animation()
 {
  ctx.clearRect(0,0, 1000, 1000);
  ctx.fillRect(x, 10, 10, 10);
  x = x+1;
  if (x > 999) { x = 0;}
  setTimeout(animation, 50);
 }
 animation();
 
28.1.

Результат выполнения листинга 28.1 представлен на рисунках ( рис. 28.1, рис. 28.2, рис. 28.3)

Результат выполнения листинга 28.1 в момент времени №1

Рис. 28.1. Результат выполнения листинга 28.1 в момент времени №1
Результат выполнения листинга 28.1 в момент времени №2

Рис. 28.2. Результат выполнения листинга 28.1 в момент времени №2
Результат выполнения листинга 28.1 в момент времени №3

Рис. 28.3. Результат выполнения листинга 28.1 в момент времени №3
< Практическая работа 9 || Практическая работа 10: 12
Сергей Крупко
Сергей Крупко

Добрый день.

Я сейчас прохожу курс  повышения квалификации  - "Профессиональное веб-программирование". Мне нужно получить диплом по этому курсу. Я так полагаю нужно его оплатить чтобы получить диплом о повышении квалификации. Как мне оплатить этот курс?

 

Галина Башкирова
Галина Башкирова

Здравствуйте, недавно закончила курс по проф веб программиованию, мне прислали методические указания с примерами тем, однако темы там для специальности 

Системный администратор информационно-коммуникационных» систем.
Мне нужно самой найти тему? или делать по высланным темам

 

Алексей Бегунов
Алексей Бегунов
Беларусь
Виктор Лабутин
Виктор Лабутин
Россия