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.2, рис. 28.3)

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

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

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