javascript - 在悬停时触发 Canvas 动画

我有画布/ javascript动画。如何在徽标元素悬停时触发跟踪？

setInterval(function() {
   traces = !traces
}, 5000)

链接https://codepen.io/NGrdanjski/pen/XKkwAY

最佳答案

画布上的事件侦听器将为您执行此操作。

https://codepen.io/mrkiefer/pen/wWmEJb

我删除了切换traces变量的setInterval，而是添加了：

cvs.addEventListener("mouseover",function(){
           traces = true;
        });

 cvs.addEventListener("mouseout",function(){
            traces = false;
        });

如果仅在鼠标悬停在徽标上时才想打开交易，则可以将鼠标侦听器添加到徽标div中：

https://codepen.io/mrkiefer/pen/KroGJo

    logo = document.getElementById("logo");


     logo.addEventListener("mouseover",function(){
           traces = true;
        });

 logo.addEventListener("mouseout",function(){
            traces = false;
        });

在这里，当您将鼠标放在stackoverflow徽标上时，星状迹线将打开。

关于javascript - 在悬停时触发 Canvas 动画，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38514229/