[HTML]canvas + javascript(2)(code)

See the Pen QWdJeLQ by minsucoding (@minsucoding) on CodePen.

 

canvas에 작은 원을 먼저 그렸습니다
그 원을 이동 시켜주기 위해서 requestAnimationFrame()을 사용했습니다

requestAnimationFrame()을 아직 모르시는 분은 제 게시글 중에 requestAnimationFrame이 있으니깐 한번 보고 오시는걸 추천드리겠습니다

canvas에 원을 그리는데 X값을 변수로 할당해주고 만약 그 X값이 계속 증가하게 된다면 원은 X값이 증가한뒤에 그 위치에 그려질것입니다

하지만 기존에 그려진 원을 지우지 않고 그냥 증가한 위치마다 그려준다면 여러점들 혹은 직선의 형태로 그려질것입니다

그렇기 때문에 함수가 시작하면 최초로 이전에 그려진 원을 지워주기 위해서 clearRect()를 해주어야 합니다
clearRect도 (x, y, width, height)의 값을 할당해주면 되는데
지금은 x, y로 이동을 하지않고 canvas자체를 초기화 시켜줘야되니 x=0, y=0 을 할당해줍니다
width와 height는 canvas자체를 지워주면 되니 canvas.width 와 canvas.height 값을 할당 해주면 될것입니다

뒤에 나오는 beginPath는 선을 그리기 위해서 시작 점을 찍어주는 메소드입니다
시작 점이 있으면 패스를 끝내는 메소드또한 있습니다
바로 closePath입니다 위에 예제를 보시면 이를 사용하지 않은걸 볼수있는데,
이는 fill()이라는 메소드는 closePath를 하지 않아도 자동으로 패스를 끝내주는 메소드이기 때문입니다
그렇기 때문에 closePath는 fill()이 아닌 다른 메소드에만 사용하면 되겠습니다

이후 값들은 자연스럽게 원을 그려주고 조건을 걸어주며 x가 증가할수 있게 만들어 줬습니다

함수가 끝나기 이전에 requestAnimationFrame으로 자신을 호출해서 조건이 되기 전까지 실행하게 만들었습니다

또, 이 형태도 이미 함수 형태이기 때문에 자체적으로는 실행을 할수 없기 때문에 최초로 함수를 밖에서 호출을 해줘야합니다

 

See the Pen MWJzNmx by minsucoding (@minsucoding) on CodePen.

 

위 예제와 형태가 같지만 한가지 추가를 하였습니다

바로 count라는 조건을 걸어주었습니다

기존에 x값은 아무 조건없이 매번 증가했지만, 이번 count라는 조건이 생기고 나서는 조건이 만족하면 증가하게 되었습니다

첫번재 예제와는 다르게 조금 느려진 모습을 볼수있습니다