Данная статья являетсвя продолжением статьи "Рисование встроеннымисредствами HTML5", в которой шла речь о новом элементе ‹canvas›, а также способах работы с ним. Мы уже познакомились с тем, как с помощью javascript можно описать контекст и изобразить на холсте графические примитивы (линия, прямоугольник, дуга, кривые), с помощью которых можно построить сложные изображения. В данной статье мы рассмотрим методы и способы создания простейших анимационных эффектов для создаваемых изображений на холсте.

Каждая анимация ‹canvas› состоит из набора простейших кадров. Для того, чтобы отобразить на холсте один кадр необходимо:

  1. Очистить холст. Это можно сделать, например, с помощью метода clearRect().
  2. Если вы хотите, чтобы исходное состояние холста всегда сохранялось, даже если вы изменяете параметры цвета и т.д., то необходимо сохранить состояние холста.
  3. Нарисовать объекты анимации, фактически этот этап и есть создание кадра.
  4. Если вы сохраняли сотсояние холста, то необходимо его загрузить, прежде чем начинать создание нового кадра.

Анимация движения

Рассмотрим пример. Создадим простейшую анимацию движения - двигающийся горизонтально прямоугольник. Создадим функцию animation(), которая рекурсивно вызывая саму себя создаст кадры движения прямоугольника.

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

  1. Очистка холста.
  2. Отрисовка закрашенного квадрата.
  3. Изменение координаты левого верхнего угла квадрата по - горизонтали, для "смещения" квадрата на следующем шаге.
  4. В случае, если наш квадрат дойдет до края холста, то начальное значение координаты x вернется к нулю.
  5. Рекурсивный вызов animation(), посредством метода setTimeout.

Создадим функцию CreateImage() для демонстрации этой анимации:

function CreateImage() {
   var cnvs = document.getElementById("canvas1");
   var ctxt = cnvs.getContext("2d");
   var x = 0;
   function animation() {
      ctxt.clearRect(0,0,150,150);
      ctxt.fillRect(x,50,50,50);
      x = x + 0.2;
      if ( x › 100) { x = 0; }
      setTimeout(animation, 10)
   }
   animation();
}

Результат:

Анимация без очистки экрана

Рассмотрим еще один пример. В данном случае мы не будем очищать экран каждый раз при прорисовке нового кадра, таким образом получится, что изображение будет плавно "прорисовываться". Особенно удачно это можно использовать при создании деловой или статистической графики, например, построим две функции.

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

function CreateImage() {
   var cnvs = document.getElementById("canvas");
   var ctxt = cnvs.getContext("2d");
   var x = 1;
   function animation2()
   {
      ctxt.fillStyle="blue";
      ctxt.fillRect(x*10, (Math.sin(x))*50+75, 2.5, 2.5);
      ctxt.fillStyle="red";
      ctxt.fillRect(x*10, (Math.cos(x))*50+75, 2.5, 2.5);
      x = x + 0.01;
      if ( x › 60) {
         x = 1;
         ctxt2.clearRect(0,0,640,150);
      }
      setTimeout(animation, 10);
    }
    animation();
}

Результат представлен ниже:

Анимация спрайтов

Для создания сложных анимаций, а также игр и других веб-приложений на основе HTML5 необходимо создавть анимации с помощью спрайтов. Спрайт - это файл изображения, хранящий в себе набор промежуточных кадров. То есть на одном изображении помещается вся раскадровка анимации или состояний объекта.

Элемент ‹canvas›, как уже было рассказано в предыдущей статье поддерживает работу с внешними изображениями, которые можно вставлять на холст. Таким образом, можно вставить спрайт-изображение и закрывая ненужную часть создать иллюзию непрерывной анимации.

В качестве источника анимации будем использовать следующий спрайт:

Для вывода кадров спрайта будем использовать метод контекста

drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

Его параметры:

  • img - определяет используемое изображение или видео
  • sx - начальная координата х вырезания (необязательный параметр)
  • sy - начальная координата y вырезания (необязательный параметр)
  • swidth - ширина вырезаемого изображения (необязательный параметр)
  • sheight - высота вырезаемого изображения (необязательный параметр)
  • x - координата размещаемого изображения на canvas
  • y - координата размещаемого изображения на canvas
  • width - ширина используемого изображения (растянуть или уменьшить изображение, необязательный параметр)
  • height - высота используемого изображения (растянуть или уменьшить изображение, необязательный параметр)

Создадим функцию для "оживления" этого спрайта:

Это только небольшая демонстрация возможностей HTML5 Canvas. Эта технология имеет широкий спектр применения: от создания деловой графики до полноразмерных и масштабных браузерных игр.