[JS html5 Canvas] Эффект волнистые кольца + sources
В видео создадим эффект перемещения волн по окружности,
данная анимация набирает популярность и всё чаще встречается на просторах интернета в разных вариациях.
При создании кода не будут использованы дополнительные библиотеки, только чистый JS.
В ролике что-то было не понятно? Пишите в комментарии или отправьте сообщение в группу вконтакте :
Редактор кода: Visual Studio Code дополнение Live Server для просмотра изменений на странице браузера в реальном времени.
sources:
v2:
v3:
Забыл упомянуть в видео, что переменные centerX и centerY нужно перенести с 28 - 29 строчки наверх и разместить над функцией init() и установить их значения внутри функции - для адаптивности, теперь анимация при изменении размеров области просмотра всегда будет в центре.
Вот так должно быть начиная с 5 строчки:
let centerX = 0;
let centerY = 0;
function init() {
= innerWidth;
= innerHeight;
centerX = / 2;
centerY = / 2;
}
init();
fixed: