그림을 그리는 프로그램을 만들기 위해서는 네가지가 필요하다.
<canvas></canvas>
라는 html tag
getContext() 메소드
그리기 함수들
pixel을 다룰 범위 설정
캔버스를 그리기 위해서는 <canvas></canvas>
라는 html element를 사용해야 한다.
javascript의 getContext()
메소드를 통해서 랜더링 context와 그리기 함수들을 활용할 수 있다. 위의 코드에서 "2d"
는 context type(canvas와 연관된 랜더링 컨텍스트를 정의하는 컨텍스트 식별자를 갖는 Dom string이다.)의 종류로서 2차원 랜더링 컨텍스트를 나타내는 객체(CanvasRenderingContext2D)를 생성한다. 이 도대체 뭔말이지..?
그런데 context란 놈은 뭘까? 찾아보니 실행 가능한 코드가 실행되기 위한 환경을 의미하는 것 같다. 즉, 랜더링 환경을 조성해준다고 이해하면 될까나?(잘 모르겠다.)
위의 코드를 설명하자면 캔버스 위에 마우스가 있을 때 마우스가 있는 지점의 좌표를 (x, y)라 하자. 만약 클릭을 하지 않았다면(기본값으로 painting=false
이고 캔버스 화면을 클릭 시에 painting=true
이다. 클릭을 때면 다시 painting=false
로 초기화된다.)
if
만약 클릭을 하지 않았다면
경로를 시작 beginPath()
하고
else
클릭을 했다면
시작점부터 (x, y)까지 경로를 만든 뒤 lineTo(x, y)
그 경로를 칠해라. stroke()
beginPath()
: 새로운 경로를 시작한다.(마치 선언하는 것과 같은 의미인 것 같다. 그리고 이 녀석은 처음 호출되고 첫 경로 생성명령때 moveTo(x, y)
로 여겨진다.)
moveTo(x, y)
: (x, y) 좌표에서 그리기를 시작하겠다. (펜을 종이에 접촉했다고 생각하면 된다.)
lineTo(x, y)
: (x, y) 좌표까지 그릴 것이다.
stroke()
: 경로를 정해둔 strokestyle로 칠한다.
closePath()
: 시작점과 현재점을 잇는다. (beginPath()
, moveTo(x, y)
이 두 녀석의 시작점으로부터 선이 만들어진다.)
css에서 설정하는 width, height말고 canvas라는 놈의 pixel을 조절할 범위를 설정해줘야한다.
그리기 함수들을 이해하기 까다로웠지만 MDN에 나와있는 예제들을 이것저것 만지다 보니까 조금이나마 이해할 수 있었던 것 같다.
그나저나 그림판도 이렇게 만들었나 하는 생각을 하니까 되게 신기하다.