我正在尝试创建一个简单的动画,其中某些粒子动画会跟随光标,但是我遇到了麻烦。
我创建了一个小提琴来复制该问题: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;
}
最佳答案
您的鼠标坐标X,Y相对于网页的左上角,可能mousemove事件是附加到文档而不是画布上的。将mosemove事件附加到画布
document.getElementById('services-canvas').addEventListener('mousemove', mouseMove);
并使用基本的偏移量:
target.x = e.offsetX;
target.y = e.offsetY;
如果您希望鼠标位于图形的中心,请使用e.offsetY-something,其中某物是图形高度的一半
关于javascript - 粒子跟随鼠标移动的光标(Javascript-Canvas),我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/60152196/