Опубликован: 01.08.2012 | Уровень: для всех | Доступ: платный | ВУЗ: Томский политехнический университет
Практическая работа 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
Галина Башкирова
Галина Башкирова

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

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

 

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