터치팡팡(a.k.a개미잡기) 개발강좌(1) - 캔버스기본

1 minute read

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




캔버스 기본정보

canvas는 html5에서 제공하는 Tag Element 로 2차원 모양의 비트맵 그림을 처리할수 있다.
html이나 css속성으로 처리하지 않고 javascript로 canvas 에 그림을 그리는 방식이다.

웹페이지에 도화지를 두고 그림을 그리는것이라고 보면 된다.

기본적으로 캔버스를 하나 생성해보자!

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

이렇게 하면 브라우저에 캔버스가 하나 그려진다. 기본적으로 캔버스는 흰색으로 생성되기 때문에 색을 넣어서 구분했다.


이제 캔버스위에 선을 하나 그려보자.

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

코드펜의 javascript 소스를 보자.

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

canvas태그를 const 변수로 잡고 2d객체를 가져왔다.
처음부터 이게 무슨말인지 크게 고민 할 필요 없다.
붓을 하나 가져왔다고 생각하면 된다. 일단 무조건 외워야 하는것이라고 생각하면 된다.

ctx.beginPath();

가져온 붓으로 그림을 그리기 시작함을 알린다.

ctx.style = "black";

검정색으로 그림을 그릴것이라고 선언한다.

ctx.moveTo(0, 0);

그림을 그리기 위해 붓을 0,0 좌표로 이동한다고 보면 된다.
0,0의 좌표는 맨 왼쪽 맨 위 이다

ctx.lineTo(100,100);

0,0 에서 100,100 까지 라인을 긋는다.

ctx.stroke();

그어진 라인에 선을 그린다.

여러가지 명령어 들이 나왔는데.. 자주 사용하는 명령들이고 작업을 하다보면 자연스럽게 익히게 되니
너무 걱정하지 말고 잘 따라와 주기 바란다.

그럼 다음에 또 만나요~!

Leave a comment