Для Hacktoberfest В этом году я внес свой вклад в Проект используя элемент. Я был заинтригован, как я сталкивался с этим раньше, когда я изучал HTML, но всегда думал: «Эх, я доберусь до этого один день …».
Что такое элемент
Это элемент HTML, который дает вам возможность рисовать с помощью JavaScript. Довольно аккуратно. Это берет все id и размеры, которые вы хотели бы в качестве атрибутов, и оборачивается вокруг резервного изображения, которое отображается только в том случае, если ваш чертеж не загружается:
Как оживить луну
Вам не нужно оживить элемент Но я думал, что это будет хороший вызов. Я решил создать Восковая и ослабляющая луна анимация . Мой подход заключался в том, чтобы написать функцию для каждой фазы и перевернуть их, используя setTimeout () Анкет
Заложить фундамент
Прежде чем что -либо еще, каждый Элемент должен начинаться с двух вещей: Сначала мы выбираем Элемент в HTML с его id и сохранить его в переменной. Во -вторых, мы создаем переменную для контекст Анкет Это то, что мы на самом деле опираемся. Удивительно! Сам элемент действительно просто контейнер. Эта переменная контекста – это то, что мы будем использовать в наших функциях.
Инициализировать
Я выбрал полумесяц в качестве своей стартовой фазы. Я нарисовал его функцией, называемой init () и добавил это как атрибут к Элемент, который мы видели раньше, так что его называют, когда страница загружается.
Повторите с небольшими вариациями
Я закончил шестью очень похожими функциями, настолько похожими, что я не буду подробно описать их здесь:
- в этом()
- квартал ()
- месяц()
- полнолуние()
- Halfmoonwane ()
- Quartermoonwane ()
Каждая функция вызывает следующую и Quartermoonwane () звонки init () Анкет Так достигается эффект непрерывного воска/ущерба. Единственные различия – это внутренние (белостные) и внешние (дуговые) кривые каждой фазы. На самом деле это всего лишь четыре функции, как Quartermoon () и Halfmoon () в основном эквивалентны Quartermoonwane () и Halfmoonwane () Анкет Я повторил их, потому что на фазе ослабления мне нужны были одни и те же формы, но разные setTimeout () функциональные вызовы.
Проблемы и размышления
Элемент не шутка. Я провел два дня, разрабатывая, как достичь этой анимации. Конечно, это была моя первая попытка И мне пришлось провести много исследований, проб и ошибок с хитрой математикой, но это все еще сложный элемент для работы. Несмотря на то, что я рад, что познакомился с этим, я не могу думать о ситуации, когда я хочу использовать ее снова.
Одна из самых сложных вещей в этом – это Вы не можете увидеть свой прогресс, если вы не позвоните методу подключения установленных вами очков (Я использовал ctx.fill () Здесь вы можете использовать Ctx.Stroke () вместо этого нарисовать линию). Это было громоздко сделать это после каждой линии, а затем удалять их все (кроме последнего), как только я узнал, что происходит. Это заставляет меня задуматься, есть ли более простой способ.
Я также очень хотел, чтобы переход между каждым этапом был немного более гладким. Я попытался ускорить интервалы на setTimeout () Но это не дало мне эффект, на который я надеялся. Я также экспериментировал с window.requestanimationFrame () , другой метод, используемый с , но это сделало это слишком быстро сами по себе. Я уверен, что есть способ заставить его работать Но я не смог найти его после большого поиска и экспериментов.
Наконец, поскольку здесь много повторяющегося кода, я уверен, что есть более элегантный способ достижения такого типа анимации, но в конце концов она выполняет работу, и я фанат!
Вот Ресурс для получения дополнительной информации о Элемент и, как всегда, Вот мой код Если вы хотите проверить более подробно.
Оригинал: “https://dev.to/gabriellend/how-to-animate-the-moon-with-the-canvas-element-2kk5”