Canvas. Анимация

Пример 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.4, рис. 28.5, рис. 28.6)

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

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

Рис. 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/