Для создания анимации приходится прибегать к помощи обычного кода JavaScript. Не существует ни специальных методов для анимирования объектов на холсте, ни четко определенной последовательности действий для решения этой задачи. По сути, нужно очищать область холста, на которой должна происходить анимация, рисовать там новые фигуры и повторять этот процесс снова и снова. Когда вы нарисуете фигуры на холсте, их уже нельзя будет передвинуть. Строить анимированное изображение можно только одним способом — стирая его часть и снова рисуя фигуры на этом месте. Вот почему в играх или приложениях, требующих анимирования большого количества объектов, лучше использовать изображения, а не фигуры, построенные на базе сложных путей (для создания игр обычно применяются изображения в формате PNG).
Разработчики программного обеспечения придумали множество техник создания анимированных изображений. Одни чрезвычайно просты, а другие не уступают по сложности самим приложениям, для которых создается анимация. Мы сконструируем простой пример, в котором будем очищать холст методом clearRect() и снова рисовать на нем фигуры. Таким образом, для создания анимации нам понадобится всего одна функция. Однако помните: если вы намереваетесь работать со сложными анимационными эффектами, стоит для начала хорошенько изучить учебник продвинутого уровня по программированию на JavaScript.
Листинг 7.27. Наша первая анимация
Function initiate(){
Var elem=document. getElementById(‘canvas’); canvas=elem. getContext(‘2d’);
Window. addEventListener(‘mousemove’, animation, false);
}
Function animation(e){
Canvas. clearRect(0,0,300,500);
Var xmouse=e. clientX; var ymouse=e. clientY; var xcenter=220; var ycenter=150;
Var ang=Math. atan2(xmouse-xcenter, ymouse-ycenter); var x=xcenter+Math. round(Math. sin(ang)*10); var y=ycenter+Math. round(Math. cos(ang)*10);
Canvas. beginPath();
Canvas. arc(xcenter, ycenter,20,0,Math. PI*2, false);
Canvas. moveTo(xcenter+70,150);
Canvas. arc(xcenter+50,150,20,0,Math. PI*2, false); canvas. stroke();
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();
}
Window. addEventListener("load", initiate, false);
В коде из листинга 7.27 мы создаем рисунок глаз, следящих за указателем мыши. Для перемещения зрачков обновляем позицию соответствующих элементов каждый раз, когда указатель мыши сдвигается. Для этого в функции initiate() используется прослушиватель события mousemove: когда событие срабатывает, происходит вызов функции animation(). Выполнение функции начинается с очистки холста инструкцией clear-Rect(0, 0, 300, 500). После этого считывается позиция указателя мыши, а в переменных xcenter и ycenter сохраняется местоположение первого глаза.
После инициализации переменных настает время вычислений. Используя местоположение указателя мыши и позицию центра левого глаза, мы вычисляем угол наклона невидимого отрезка, соединяющего две эти точки. Для этого используется стандартный метод JavaScript atan2. Затем на основе значения угла по формуле xcenter + Math. round(Math. sin(ang) х 10) вычисляются точные координаты центра зрачка. Число 10 в формуле представляет собой расстояние от центра глаза до центра зрачка (зрачок никогда не перемещается в центр, он всегда остается у края глаза).
Наконец, получив все значения, мы можем нарисовать на холсте глаза. Первый путь объединяет две окружности, соответствующие глазам. Первый метод arc() рисует окружность с координатами xcenter и ycenter, а второй arc() создает аналогичную окружность на 50 пикселов правее первой, для чего ему передается инструкция arc(xcenter+50, 150, 20, 0, Math. PI*2, false).
Анимированная часть рисунка определяется вторым путем. Для создания этого пути используются переменные x и у со значениями, вычислен-
Ными ранее на основе величины угла. Оба зрачка визуализируются как черные круги с помощью метода fill().
Процесс повторяется, и значения пересчитываются при каждом срабатывании события mousemove.
Скопируйте код из листинга 7.27 в JavaScript-файл с именем canvas. js и откройте в браузере HTML-файл, содержащий шаблон из листинга 7.1.
Добавить комментарий