Canvas анимация на JavaScript, простыми словами и без воды

Canvas анимация на JavaScript, простыми словами и без воды
Метки: / /

В этой статья рассказывается как делается анимация на canvas c использованием JavaScript и вы увидите что делать её очень просто.

Надо сказать, что наглядных примеров не будет, в том плане, что вы не увидите как программа работает, но будет код и вы сможете его скачать.

Также перед тем как читать статью рекомендую посмотреть это: Canvas HTML. Основы создания фигур на javascript.

Суть работы с canvas анимацией:

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

Ну и конечно изменять надо плавно, используя setInterval, и менять значения параметров не резко, к примеру, была позиция по X равна 10, и сразу менять её на 100, не надо, а  лучше просто увеличивать её на 1 каждые 10 миллисекунд.

Примеры работы:

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

1. Самый простой пример:

В первом примере мы просто будем перемещать по оси X квадрат, пока он не исчезнет, после этого резко будем возвращать его обратно.

В HTML как обычно используем тег canvas, задаём ему атрибуты ширины и высоты, 300 и 200 соответственно.

Давайте не много разберём как же делается canvas анимация, сначала как обычно берём элемент canvas и задаём ему, что будем рисовать 2D графику, рисуем квадрат на позиции Y=0 и X=0, с шириной 100 и с высотой 100, красного цвета.

Потом объявляем переменную «position», задаём значение ноль.

Запускаем интервал, внутри его код который будет срабатывать каждые 10 миллисекунд, дальше внутри интервала, стираем абсолютно всё, что есть в canvas, увеличиваем переменную «position» на один, и рисуем новый, точно такой же квадрат, но уже параметру X ставим переменную «position».

Проверяем, равна ли переменная «position» значению 300, если да то присваиваем ей ноль, также это условии можно заменить делением с остатком на 300, так программа будет работать быстрее, но что бы было более понятно я написал условие.

Таким образом квадрат после того как уедет за границе элемента canvas, он будет проявляться в самом начале заново.

2. Более сложный пример работы с canvas:

В этом примере квадрат уже будет перемешаться вдоль границы элемента canvas  и делать круг.

Начало я не буду объяснять, так как оно точно такое же, как и в первом примере, единственное, мы прямо сначала объявляем переменные где будут хранится позиция по X и Y, в первом же создание квадрата используем их, после этого идёт интервал.

В интервале же, стираем всё в элементе canvas и проверяем условия, про них подробнее.

Первое что наверное бросается в глаза, так это зачем в условии увеличивать переменные позиции на 50, в том дела, что если позиция X будет равна 300, то тогда квадрат уйдёт за пределы видимой части, соответственно, позиция всегда должна быть меньше 300, а так как размере квадрата равен 50 на 50, то тогда, в условии надо проверять, меньше или равно позиция по X плюс 50, к 300, что бы квадрат всегда был полностью виден.

В первом условие проверяется, позиция X плюс 50 меньше или равно 300 и позиция Y равна нулю, пока условие истинно, то позиция X будет увеличиваться на один, то квадрат будет перемещаться в право.

Во втором условие уже проверяется, что бы позиция X плюс 50 была равна 300, и позиция Y плюс 50 была равна 200, если истинно, то тогда позиция Y будет увеличиваться на один, что значит квадрат будет двигаться вниз.

Дальше всё примерно так же, только условия не много меняются, в принципе если вы читали статью, про основы создания фигур (Ссылка выше), вы должны понять почему используются такие условия.

В конце рисуем квадрат заново, но уже с новыми значениями позиции.

Вывод:

В этой статье было про то как делается canvas анимация на JavaScript, как видите всё очень просто, вам надо только в начале стереть всё и сразу же нарисовать новый квадрат с новыми параметрами, конечно, это можно делать и с линиями и дугами, без разницы.

Если вы всё поняли в этой статье, то посмотрите: Javascript пинг понг создаём игру с использованием canvas.

Подписываетесь на соц-сети:

Оценка:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
(Пока оценок нет)
Загрузка...

Поделится:

Также рекомендую: