粒子跟随鼠标移动的光标（Javascript - 画布）答案

【问题标题】：Particles follow cursor on mousemove (Javascript - Canvas)粒子跟随鼠标移动的光标（Javascript - 画布）
【发布时间】：2020-02-10 14:10:42
【问题描述】：

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

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

【问题讨论】：

它接缝你没有考虑到<div class="section particles" id="services"> dom 元素和首页

标签： javascript canvas mousemove

【解决方案1】：

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

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

并使用元素偏移：

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

如果您希望鼠标位于图形的中心，则使用 e.offsetY-something 在图形高度一半的地方

【讨论】：

我已经修改了以下内容：if(!('ontouchstart' in document.getElementById('services')))，但它的位置仍然很糟糕。我还尝试将 posx = e.pageX; 和 posy = e.pageY; 修改为 posx = e.pageX / 2 和 posy = e.pageY / 2，但粒子不是'不在正确的位置
@Perdixo 在 mousemove 中使用：target.x = e.offsetX;目标.y = e.offsetY;并将事件附加到画布： document.getElementById('services-canvas').addEventListener('mousemove', mouseMove);

【解决方案2】：

所以你的粒子实际上是按照我在 .但是，它们在 y 位置的位置似乎比您预期的要低。您需要这样做才能使其正常工作：

target.y = posy -300;

我已经尝试过了，它与这个小改动一起工作。希望这会有所帮助：D

【讨论】：