HTML5: основы клиентской разработки

Canvas. Анимация

Показывать лекцию целиком

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

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

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

    Пример 1

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

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

  • Очистка холста.
  • Отрисовка закрашенного квадрата.
  • Изменение координаты левого верхнего угла квадрата по - горизонтали, для "смещения" квадрата на следующем шаге.
  • В случае, если наш квадрат дойдет до края холста, то начальное значение координаты x вернется к нулю.
  • Рекурсивный вызов ).
    •  
    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" type="example">листинга 28.1 представлен на рисунках (рис 28.2, рис 28.3)

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

    Пример 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" type="example">листинга 28.2 представлен на рисунках (рис 28.5, рис 28.6)

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

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

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

  • http://msdn.microsoft.com/ru-ru/library/gg589516%28v=vs.85%29.aspx
  • http://www.html5canvas.ru/2011/04/blog-post_12.html
  • http://habrahabr.ru/post/119585/
    •
    Предыдущее занятие Следующее занятие
    Вернуться к учебному плану
    ^