В этой статья рассказывается как делается анимация на canvas c использованием JavaScript и вы увидите что делать её очень просто.
Надо сказать, что наглядных примеров не будет, в том плане, что вы не увидите как программа работает, но будет код и вы сможете его скачать.
Также перед тем как читать статью рекомендую посмотреть это: Canvas HTML. Основы создания фигур на javascript.
Суть работы с canvas анимацией:
Суть работы с canvas заключается в том, что мы стираем, к примеру, квадрат, линию или круг и перерисовываем её с изменёнными параметрами.
Ну и конечно изменять надо плавно, используя setInterval, и менять значения параметров не резко, к примеру, была позиция по X равна 10, и сразу менять её на 100, не надо, а лучше просто увеличивать её на 1 каждые 10 миллисекунд.
Примеры работы:
Сначала покажем как просто перемещать, потом как уже более динамически менять позицию с использованием условий.
1. Самый простой пример:
В первом примере мы просто будем перемещать по оси X квадрат, пока он не исчезнет, после этого резко будем возвращать его обратно.
В HTML как обычно используем тег canvas, задаём ему атрибуты ширины и высоты, 300 и 200 соответственно.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | let canvas = document.getElementById("canvas"); let ctx = canvas1.getContext('2d'); ctx.fillStyle = "red"; ctx.fillRect(0, 0, 100, 100); let position = 0; setInterval(function () { ctx.clearRect(0, 0, 300, 200); position++; ctx.fillRect(position, 0, 100, 100); if (position == 300){ position = 0; } }, 10); |
Давайте не много разберём как же делается canvas анимация, сначала как обычно берём элемент canvas и задаём ему, что будем рисовать 2D графику, рисуем квадрат на позиции Y=0 и X=0, с шириной 100 и с высотой 100, красного цвета.
Потом объявляем переменную «position», задаём значение ноль.
Запускаем интервал, внутри его код который будет срабатывать каждые 10 миллисекунд, дальше внутри интервала, стираем абсолютно всё, что есть в canvas, увеличиваем переменную «position» на один, и рисуем новый, точно такой же квадрат, но уже параметру X ставим переменную «position».
Проверяем, равна ли переменная «position» значению 300, если да то присваиваем ей ноль, также это условии можно заменить делением с остатком на 300, так программа будет работать быстрее, но что бы было более понятно я написал условие.
Таким образом квадрат после того как уедет за границе элемента canvas, он будет проявляться в самом начале заново.
2. Более сложный пример работы с canvas:
В этом примере квадрат уже будет перемешаться вдоль границы элемента canvas и делать круг.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | let canvas = document.getElementById("canvas"); let ctx = canvas.getContext('2d'); ctx.fillStyle = "green"; let pos_x = 0, pos_y = 0; ctx.fillRect(pos_x, pos_y, 50, 50); setInterval(function () { ctx.clearRect(0, 0, 300, 200); if (pos_x + 50 <= 300 && pos_y == 0) { pos_x++; } if (pos_x + 50 == 300 && pos_y + 50 <= 200) { pos_y++; } if (pos_x >= 0 && pos_y + 50 == 200) { pos_x--; } if (pos_x == 0 && pos_y >= 0) { pos_y--; } ctx.fillRect(pos_x, pos_y, 50, 50); }, 10); |
Начало я не буду объяснять, так как оно точно такое же, как и в первом примере, единственное, мы прямо сначала объявляем переменные где будут хранится позиция по 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.
Подписываетесь на соц-сети:
Оценка:
Загрузка...