В прошлой статье мы рассказали, как использовать холст для рисования графики, но все рисунки были статической графикой. На этой неделе мы научимся использовать холст для рисования динамической графики.
Что такое анимация?Прежде чем рисовать анимацию, мы должны понять, что такое анимация. Каковы минимальные базовые условия, необходимые для анимации?
Какой инструмент мы можем использовать для отображения анимации?
Это анимационный эффект, нарисованный с использованием PPT.
Судя по эффекту анимации, нарисованному приведенным выше PPT, мы видим, что при быстром переключении между несколькими страницами PPT вы увидите эффект анимации.
Это основной элемент реализации анимации:
Воспроизведение нескольких изображений непрерывно в единицу времени. Это единичное время обычно измеряется в секундах. Чтобы получить достаточно плавное видео в компьютерной графике, количество изображений в секунду должно быть больше или равно частоте обновления монитора (обычно эта частота обновления составляет 60 Гц).
Состояние объектов на каждой картинке (размер, форма, цвет, положение, угол и т. д.) должно меняться.
Итак, как нам реализовать эти два условия в холсте?
Как нарисовать 60 рисунков за 1 секундуМы можем преобразовать это в рисование графика каждые 1/60 с. В JavaScript, если мы хотим время от времени что-то делать, мы используем метод setinterval таймера.
Что такое таймер? setinerval（function f(){}，t）， в таймер можно передать два параметра: один — функция, а другой — время. Смысл этого кода — выполнять функцию f каждые t мс.
Затем мы используем это для достижения того, что нам нужно: рисовать график каждые 1/60 с.
setInterval(function(){canCon.fillStyle=black;//canCon.fill означает взять ручку и нарисовать сплошную графику на этой рисовой бумаге, //style=black означает окунуть ее в черные чернила//непрерывно Смотреть на это просто возьмите ручку для рисования сплошной графики и наклейте ее черными чернилами canCon.arc(233,233,66,0,Math.PI*2); //Рассмотрим рисование круга на рисовой бумаге (положение центра по оси X, положение по оси Y, радиус круга, где начать рисовать круг и где закончить canCon.fill()); штрих для рисования},1000/60 )конечный эффект
Но эффекта анимации пока нет, поскольку все 60 изображений, нарисованных за 1 секунду, абсолютно одинаковы, поэтому состояние элемента необходимо менять при рисовании каждого изображения.
Кстати, хочу вам порекомендовать юбку. Перед 537, средняя 631 и последняя 707. Друзья, которые хотят изучить фронтенд, могут присоединиться к нам, чтобы учиться вместе и помогать друг другу. В группе есть мастера, которые каждый вечер проводят бесплатные живые занятия. Не хотите учиться – не присоединяйтесь.
(537-631-707)
Как изменить состояние элемента?
Положение круга определяется координатами центра круга, поэтому мы можем менять положение элемента каждый раз, когда рисуем холст.
варьироваться=100;//Укажите начальное положение центра круга, и положение y центра круга будет перемещаться вниз на расстояние каждый раз, когда он рисуется setInterval(function(){canCon.fillStyle=black;// canCon.fill означает: «Возьмите ручку и нарисуйте твердые фигуры на этой рисовой бумаге», //style=black означает «макнуть ее в нее». Черная тушь //Чтобы ее соединить, нужно взять ручку для рисования сплошной графики и обклеить ее черной тушью canCon.arc(233,y++,66,0,Math.PI*2);//На рисе paper Задумать и нарисовать круг (положение X центра круга, положение Y, радиус круга, где начать рисовать круг и где закончить canCon.fill();//Последний штрих); рисовать},1000/60)Сейчас мы видим не движущийся круг, а скорее расширяющийся индикатор выполнения. Причина на самом деле очень проста: мы не стираем исходное изображение каждый раз, когда рисуем новое. Такое изображение является результатом наложения нескольких изображений. Итак, каждый раз, когда мы рисуем новое изображение, нам приходится стирать исходное. Как это сделать?
варьироваться=100;//Укажите начальное положение центра круга, и положение y центра круга будет перемещаться вниз на расстояние каждый раз, когда он рисуется setInterval(function(){canCon.clearRect(0, 0, 500, 500);//Стираем координаты верхнего левого угла прямоугольной области, а также ширину и высоту прямоугольника canCon.fillStyle=black;//canCon.fill означает подобрать рисунок на этой рисовой бумаге Ручка с сплошной графикой, //style=black означает обмакнуть ее в черные чернила //Чтобы собрать ее, нужно взять ручку, рисующую сплошную графику, и наклеить ее черными чернилами canCon.arc(233,y++,66 , 0,М ath.PI*2);//Рассмотрим рисование круга на рисовой бумаге (положение X центра круга, положение Y, радиус круга, где начать рисовать круг и где закончить canCon.fill(); );// Начинаем рисовать},1000/60)Но на данный момент это все еще не имеет никакого эффекта, так что же именно происходит? Мы можем вспомнить сцену из детства, когда мы рисовали. Когда мы стираем определенную область на бумаге для рисования, нужно ли нам сначала поднять кисть, чтобы мы могли использовать ластик, чтобы стереть определенные области на бумаге? поэтому вам придется поднять перо, прежде чем стереть участок холста.
варьироваться=100;//Укажите начальное положение центра круга, и положение y центра круга будет перемещаться вниз на расстояние каждый раз, когда он рисуется setInterval(function(){canCon.beginPath();// Поднимите перо canCon.clearRect(0, 0, 500, 500); // Стираем координаты верхнего левого угла прямоугольной области и координаты прямоугольника. Ширина и высота canCon.fillStyle=black;//canCon.fill означает взять ручку и нарисовать сплошную графику на рисовой бумаге, //style=black означает обмакнуть ее в черные чернила//Если вы посмотрите на нее вместе , это Возьмите ручку для рисования твердых фигур и наклейте ее черными чернилами canCon.arc(233,y++,66,0,Math.PI*2); //Рассмотрим рисование круга на рисовой бумаге (положение центра по оси X, положение по оси Y, радиус круга, где начать рисовать круг и где закончить canCon.fill()); штрих для рисования},1000/60 )Таким образом мы можем получить движущийся круг.
Подвести итогВышеуказанное представляет собой введение редактора в самый мощный интерфейс H5, Canvas, для реализации функций динамической графики. Если у вас есть какие-либо вопросы, оставьте мне сообщение, и редактор ответит вам вовремя. Я также хотел бы поблагодарить всех за поддержку сайта боевых искусств VeVb!