Частицы следуют за курсором при перемещении мыши (Javascript - Canvas)

Я пытаюсь создать простую анимацию, где анимация некоторых частиц следует за курсором, но у меня проблемы с этим.

Я создал скрипку, чтобы повторить проблему: Пример на JSFiddle

Прямо сейчас появляются мои частицы, но когда вы наводите курсор на секцию, они внезапно исчезают. Я знаю, что моя ошибка исходит от моей функции mousemove() , но я не могу понять, что с ней не так ..

вот моя функция перемещения мыши:

function mouseMove(e) {
        var posx = posy = 0;
        if (e.pageX || e.pageY) {
            posx = e.pageX;
            posy = e.pageY;
        }
        else if (e.clientX || e.clientY)    {
            posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
            posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
        }
        target.x = posx;
        target.y = posy;
    }

Всего 2 ответа


Координаты мыши X, Y относительно верхнего / левого угла веб-страницы, возможно, событие mousemove прикреплено к документу, а не к холсту. Прикрепить событие mosemove к холсту

document.getElementById('services-canvas').addEventListener('mousemove', mouseMove);

И используйте элемент ofset:

target.x = e.offsetX;
target.y = e.offsetY;

Если вы хотите, чтобы мышь находилась в центре фигуры, используйте e.offsetY - что-то, где половина высоты фигуры


Таким образом, ваши частицы действительно следуют за мышью из того, что я видел в. Тем не менее, кажется, что они находятся намного ниже той позиции y, которую вы ожидаете. Вам нужно сделать это, чтобы она работала правильно:

target.y = posy -300;

Я попробовал это, и это работало с этим небольшим изменением. Надеюсь, это помогло: D


Есть идеи?

10000