鼠标移动时粒子跟随光标 (Javascript - Canvas)

Question

我正在尝试创建一个简单的动画，其中一些粒子动画会跟随光标，但我遇到了问题。

我创建了一个 fiddle 来复制这个问题：Example on JSFiddle

现在我的粒子出现了，但是当你将光标移动到该部分时，它们突然消失了。我知道我的错误来自我的 mousemove() 函数，但我不知道它有什么问题..

这是我的 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 是相对于网页的 top/left 角，可能是 mousemove 事件附加到文档，而不是 canvas。将 mosemove 事件附加到 canvas

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

并使用元素偏移量：

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

如果你想让鼠标在图形的中心，那么使用e.offsetY-一些东西是图形高度的一半

Answer 2

所以从我在 .但是，它们的 y 位置似乎要低得多，您 expect.You 需要这样做才能使其正常工作：

target.y = posy -300;

我试过了，只要稍加改动就可以了。希望这有帮助 :D

鼠标移动时粒子跟随光标 (Javascript - Canvas)

Particles follow cursor on mousemove (Javascript - Canvas)

javascript

canvas

mousemove