粒子在mousemove上跟随光标（Javascript-画布）

Posted 2021-04-27

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

我创建了一个小提琴来复制该问题：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;
    }

我正在尝试创建一个简单的动画，其中某些粒子动画会跟随光标，但是我遇到了麻烦。我创建了一个小提琴来复制该问题：JSFiddle上的示例现在...

答案

您的鼠标坐标X，Y相对于网页的左上角，可能mousemove事件附加到文档，而不是画布。将mosemove事件附加到画布上

另一答案

所以您的粒子实际上按照我在中看到的内容跟随了鼠标。但是，它们似乎在您期望的y位置低很多。您需要执行此操作以使其正常工作：