Анимация

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

Рассмотрим простой пример, в котором будем очищать холст методом clearRect() и снова рисовать на нем фигуры.

var canvas;
function initiate(){
  var elem = document.getElementById('canvas');
  canvas = elem.getContext('2d');
  addEventListener('mousemove', animation);
}
function animation(e){
  canvas.clearRect(0, 0, 700, 300);
  var xmouse = e.clientX;
  var ymouse = e.clientY;
  var xcenter = 220;
  var ycenter = 150;
  var ang = Math.atan2(ymouse - ycenter,xmouse - xcenter);
  var x = xcenter + Math.round(Math.cos(ang) * 10);
  var y = ycenter + Math.round(Math.sin(ang) * 10);
  canvas.beginPath();
  canvas.arc(xcenter, ycenter, 20, 0, Math.PI * 2, false);
  canvas.moveTo(xcenter + 70, 150);
  canvas.arc(xcenter + 50, ycenter, 20, 0, Math.PI * 2, false);
  canvas.stroke();
  x = x+70
  canvas.beginPath();
  canvas.moveTo(x + 10, y);
  canvas.arc(x, y, 10, 0, Math.PI * 2, false);
  canvas.moveTo(x + 60, y);
  canvas.arc(x + 50, y, 10, 0, Math.PI * 2, false);
  canvas.fill();
}
addEventListener("load", initiate);

Мы создали рисунок глаз, следящих за указателем мыши. Для перемещения зрачков обновляем позицию соответствующих элементов каждый раз, когда указатель мыши сдвигается. Для этого в функции initiate() используется прослушиватель событий mousemove, который вызывает функцию animation().

Выполнение функции начинается с очистки холста инструкцией clearRect(0, 0, 300, 500). После этого считывается позиция указателя мыши, а в переменных xcenter и ycenter сохраняется местоположение первого глаза.

После инициализации переменных, вычисляем угол наклона невидимого отрезка, соединяющего две эти точки. Для этого используется стандартный метод atan2.

Math.atan2(y, x)

Метод atan2 возвращает числовое значение между -PI и PI, представляющее собой угол Theta для точки (x,y). Это угол, отсчитываемый против часовой стрелки и измеряемый в радианах, между положительным лучом оси X и точкой (x,y). Заметим, что порядок аргументов у этой функции такой, что координата по Y передается первой, а по X - второй.

Методу atan2 передаются отдельно значения x и y, а (atan) - отношение этих двух аргументов.

Затем, на основе угла, по формуле

xcenter + Math.round(Math.sin(ang)x10)

вычисляем точные координаты центра зрачка. Число 10 — это расстояние от центра глаз до центра зрачка

Получив нужные значения, рисуем на холсте глаза. Первый путь объединяет две окружности — получим глаза. Первый метод arc() рисует окружность с координатами xcenter и ycenter. Второй вызов метода arc() создает аналогичную окружность на 50 пикселов правее первой, для чего ему передается инструкция arc(xcenter+50, 150, 20, 0, Math.PI*2, false).

Анимированная часть рисунка определяется вторым путем. Для создания этого пути используются переменные x и y со значениями, вычисленными ранее на основе величины угла. Оба зрачка визуализируются как черные круги с помощью метода fill().

Процесс повторяется при каждом срабатывании события mouseover.