Поможете найти анимацию (canvas)?

Ссылка скопирована
25 января 2026 1 ответ

Здраствуйте, суть вопроса такова хочу разобраться как сделать такую анимацию фона помню что находил такую анимацию на codepen но сейчас найти не могу помогите найти эту анимацию или похожую?

Суть анимации что точки летят в разные стороны от центра а когда находишься курсором то они начинают лететь в его сторону

Ссылка на видео анимации - вот

Дополнительно:

Близко https://codepen.io/oklai/pen/njQVxV

  • Такое вроде через webgl делается
  • Никита,

    snippet

  • ProjectSoft, Спасибо огромное
  • Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Антон С. Ответ

    Для поиска анимации на canvas вам необходимо использовать JavaScript. Ниже приведен пример кода, который поможет вам создать простую анимацию на canvas:

    // Создаем canvas элемент
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    document.body.appendChild(canvas);
     
    // Устанавливаем размеры canvas
    canvas.width = 800;
    canvas.height = 600;
     
    // Функция отрисовки анимации
    function draw() {
      // Очищаем canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);
     
      // Рисуем анимацию (например, двигающийся квадрат)
      ctx.fillStyle = 'blue';
      ctx.fillRect(x, 50, 50, 50);
     
      // Обновляем позицию квадрата
      x += 1;
     
      // Повторяем отрисовку каждые 10 миллисекунд
      requestAnimationFrame(draw);
    }
     
    // Начальная позиция квадрата
    var x = 0;
     
    // Запускаем анимацию
    draw();

    // Создаем canvas элемент var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); document.body.appendChild(canvas); // Устанавливаем размеры canvas canvas.width = 800; canvas.height = 600; // Функция отрисовки анимации function draw() { // Очищаем canvas ctx.clearRect(0, 0, canvas.width, canvas.height); // Рисуем анимацию (например, двигающийся квадрат) ctx.fillStyle = 'blue'; ctx.fillRect(x, 50, 50, 50); // Обновляем позицию квадрата x += 1; // Повторяем отрисовку каждые 10 миллисекунд requestAnimationFrame(draw); } // Начальная позиция квадрата var x = 0; // Запускаем анимацию draw();

    Этот код создаст простую анимацию движущегося квадрата на canvas. Вы можете изменить параметры анимации (цвет, форму, скорость движения и т. д.) в соответствии с вашими потребностями.

    Если вам нужно найти готовую анимацию на canvas, вы можете использовать различные библиотеки, такие как CreateJS или Three.js, которые предоставляют готовые инструменты для создания сложных анимаций на canvas.

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно