Томский политехнический университет
Опубликован: 01.08.2012 | Доступ: свободный | Студентов: 18562 / 1816 | Оценка: 3.91 / 4.09 | Длительность: 12:36:00
Практическая работа 10:

Canvas. Анимация

< Практическая работа 9 || Практическая работа 10: 12

Пример 2

Во втором примере мы рассмотрим отрисовку двух графиков. В отличие от предыдущего примера, мы не будем очищать холст, для того, чтобы графики формировались в реальном времени.

function createImage() 
  {
  var ctx = document.getElementById('lesson10').getContext('2d');
  var x = 0;
  function animation()
  {
    ctx.fillStyle="blue";
    ctx.fillRect(x*100, (Math.sin(x)*100)+100, 3, 3);
    ctx.fillStyle="red";
    ctx.fillRect(x*100, (Math.cos(x)*100)+100, 3, 3);
    x = x+0.05;
    setTimeout(animation, 50);
  }
  animation();
28.2.

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

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

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

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

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

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

Дополнительный ссылки по теме

  1. http://msdn.microsoft.com/ru-ru/library/gg589516%28v=vs.85%29.aspx
  2. http://www.html5canvas.ru/2011/04/blog-post_12.html
  3. http://habrahabr.ru/post/119585/
< Практическая работа 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 () "

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

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

Андрей Плотников
Андрей Плотников
Россия, г. Москва
Berkut Molodoy
Berkut Molodoy
Россия