Томский политехнический университет
Опубликован: 01.08.2012 | Доступ: свободный | Студентов: 17120 / 1588 | Оценка: 3.91 / 4.09 | Длительность: 12:36:00
Практическая работа 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
Эмиль Галеев
Эмиль Галеев

По каким то причинам не сохраняется текст. И не выдает сообщение об ошибке если текста нет. Проверил все внимательно проблем в написании нет. Вопрос почему он не сохраняет?

Алексей Вычегжанин
Алексей Вычегжанин

http://www.intuit.ru/studies/courses/3734/976/lecture/27486?page=3

Заполнил html, js и css-файлы согласно рекомендациям. После запуска главной страницы в панели разработчика браузера, во вкл. Console, выдает сообщение об ошибке:

"script.js:85 Uncaught TypeError: Cannot read property 'addEventListener' of null"

, ссылаясь на строку js-файла (функция load()):

" audio.addEventListener('ended', function () "

При дальнейшем просмотре результатов доступны только функции просмотра треков по выбранному альбому и предварительного прослушивания трека. 

Функция добавления записей в плейлист не работает. Соответственно сам плей-лист и полоса прокрутки не открываются.

Мария Гуселетова
Мария Гуселетова
Россия, Омск
Анастасия Теницкая
Анастасия Теницкая
Россия