터치팡팡(a.k.a개미잡기) 개발강좌(2) - 캔버스에 공을 그려보자.

1 minute read

html5의 캔버스(canvas)를 이용하여 터치팡팡게임을 만드는 과정을 소개합니다. a.k.a 개미잡기
완성된 게임은 터치팡팡 <- 링크를 통해 확인할수 있다.




캔버스위에 공 그려보기

저번시간에는 캔버스 태그를 써보고 간단하게 라인을 그어 보았다.
이벤에는 공을 그려볼것이다.

See the Pen canvas 003 by mnmsoft (@mnmsoft) on CodePen.

소스를 보자

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

여기까지는 캔버스 태그를 셀렉하고 2d컨텍스트를 가져오는것이고 지난번에도 사용했듯이 기본적으로 들어간다고 보면 된다.

ctx.beginPath();

붓을 들고~~

ctx.arc(150,70,50,0,Math.PI/180*360,false)

이게 원을 그린것이다.
매개변수를 살펴보자
순서대로
(x좌표,y좌표,반지름,시작각도,끝각도,반시계방향) 이다.

[150,70] 좌표에 50크기의 반지름을 가진 원을 0도 부터 360도 까지 시계방향으로 그린것이다.

360도인데

Math.PI/180 * 360

으로 적은것은 캔버스에서 사용하는 각도의 단위가 우리가 흔희 알고 있는 디그리(Deg)단위가 아니라 라디안(Rad)라서 그렇다. 대부분 많은 프로그래밍 언어에서 각도를 라디안으로 표현한다. 디그리를 라디안으로 변경하는 공식은 1라디안 = π /180 이다. 그래서 360도를 Math.PI/180*360 로 표현했다. Math.PI 는 javascript가 재공하는 π이다.

각도를 자주 사용하기 때문에 함수로 빼서 사용해도 좋다.

function toRadian(d){
  return Math.PI / 180 * d;
}

그리고 마지막 false 는 0도 부터 360도까지 시계방향으로 그리겠다는 의미이다.
원 전체를 다 그리고 있기 때문에 true를 하거나 false 하거나 차이가 없다.

ctx.fill();

원을 채워서 그린다. 지난번에는

ctx.stroke();

였는데 이번에는 fill이다. 선만 그리면 stroke 선안을 면으로 채우면 fill 이다!

추가로 각도를 조금 변경해서 자세히 파악해보자.

See the Pen canvas 004 by mnmsoft (@mnmsoft) on CodePen.

위치를 조정하여 3개의 원을 그렸지만 종료각도와 반시계방향에 대한 옵션을 다르게 했다.

첫번째 원을 보면

ctx.arc(30,30,30,toRadian(0),toRadian(50),false);

0도 50도 까지 그렸다. 이것으로 우리는 0도가 가장 우측점을 기준으로 한다는것을 알수 있다.

ctx.arc(130,30,30,toRadian(0),toRadian(80),false);

두번째는 0도에서 80도 까지 그렸다. 첫번째 보다 조금더 선이 그려진것을 알수 있다.

ctx.arc(230,30,30,toRadian(0),toRadian(80),true);

세번째는 두번째와 동일하게 0도에서 80도 까지 그렸다. 그러나 마지막 매개변수를 false 가 아닌 true 를 줬다. 반시계 방향으로 그린다.것이다. 두번째 그려진 그림과 비교해보면 정확히 마지막 매개변수가 어떤 의미인지 이해가 될것이라고 생각한다.

다음시간에는 이렇게 그러젼 원을 움직여 볼생각이다.

다음에 또 만나요~!

Leave a comment