[VanillaJS Proejct #1 캔버스 페인팅] Canvas

mechaniccoder·2020년 5월 5일
1
post-thumbnail

내용

그림을 그리는 프로그램을 만들기 위해서는 네가지가 필요하다.

  • <canvas></canvas> 라는 html tag

  • getContext() 메소드

  • 그리기 함수들

  • pixel을 다룰 범위 설정

1. canvas html tag


캔버스를 그리기 위해서는 <canvas></canvas> 라는 html element를 사용해야 한다.

2. getContext() 메소드


javascript의 getContext() 메소드를 통해서 랜더링 context와 그리기 함수들을 활용할 수 있다. 위의 코드에서 "2d" 는 context type(canvas와 연관된 랜더링 컨텍스트를 정의하는 컨텍스트 식별자를 갖는 Dom string이다.)의 종류로서 2차원 랜더링 컨텍스트를 나타내는 객체(CanvasRenderingContext2D)를 생성한다. 이 도대체 뭔말이지..?

그런데 context란 놈은 뭘까? 찾아보니 실행 가능한 코드가 실행되기 위한 환경을 의미하는 것 같다. 즉, 랜더링 환경을 조성해준다고 이해하면 될까나?(잘 모르겠다.)

3. 그리기 함수들


위의 코드를 설명하자면 캔버스 위에 마우스가 있을 때 마우스가 있는 지점의 좌표를 (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) 이 두 녀석의 시작점으로부터 선이 만들어진다.)

4. pixel을 다룰 범위 설정


css에서 설정하는 width, height말고 canvas라는 놈의 pixel을 조절할 범위를 설정해줘야한다.

느낀점

그리기 함수들을 이해하기 까다로웠지만 MDN에 나와있는 예제들을 이것저것 만지다 보니까 조금이나마 이해할 수 있었던 것 같다.

그나저나 그림판도 이렇게 만들었나 하는 생각을 하니까 되게 신기하다.

profile
세계 최고 수준을 향해 달려가는 개발자입니다.

0개의 댓글