자바 스크립트와 캔버스 - 같은 그런</p> <pre><code>SetInterval(function() { particlesY -= 1; }, 10); </code></pre> <p>... 아주 기본입니다 ... 루프를

Question

그래서, 내가 위쪽으로 뭔가를 애니메이션하려면 다음 코드를 사인파 애니메이션 :

ctx.clearRect(0,0,canvas.width,canvas.height); 
ctx.drawRect(50, particlesY, 32, 32); 

잘 작동하지만 약간의 X 축 변형을 원합니다. Math.random()을 사용하여 임의의 방향을 얻을 수 있지만 결과는 매우 어색하고 매우 우스운 것입니다.

나는 사인파가 멋진 부드러운 X 축 변화를 줄 것이라고 생각했다.

아이디어가 있으십니까? :(

Answer 1

사인파는 매우 간단합니다 :

이

ctx.drawRect(Math.sin(particlesY) * 100, particlesY, 32, 32);