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

Question

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

Я создал скрипку, чтобы повторить проблему: Пример на 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;
    }

Answer 1

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

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

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

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

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

Answer 2

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

target.y = posy -300;

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