호버상의 트리거 캔버스 애니메이션

Question

캔버스/자바 스크립트 애니메이션이 있습니다. 로고 요소를 가져 가면 추적을 어떻게 트리거합니까?

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; 
     }); 

마우스가 로고를 초과하는 경우에만에 거래를 설정하려면, 다음

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

logo = document.getElementById("logo"); 


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

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

: 대신 로고 DIV에 마우스 리스너를 추가합니다

여기에서 마우스를 stackoverflow 로고 위에 올려 놓으면 별 모양이 켜집니다.