在悬停时触发画布动画

Question

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

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

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

Answer 1

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

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

我删除了切换跟踪变量的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徽标上时，星形轨迹将会打开。