[API/Canvas] 기본 사용 방법

 

기본 사용 방법

 

---

 

기본 메소드

드로잉 컨텍스트 ctx 의 다양한 메소드를 이용하여 선, 도형등을 그릴 수 있습니다. 

• beginPath() : 새로운 경로(path) 생성
  • 최초에는 호출하지 않아도 이미 경로(path) 하나가 존재합니다. 이전 경로와의 연결을 끊고 새 경로를 생성할 경우에 호출합니다.
• closePath() : 경로 닫기; 현재 하위 경로의 시작 부분과 연결된 직선을 추가 
  • fill() 호출 시, 열린 도형은 자동으로 닫히게 되므로 closePath()를 호출하지 않아도 됩니다. stroke() 에는 적용되지 않습니다.
• stroke() : 윤곽선을 이용하여 도형 그리기
• fill() : 경로의 내부를 채우기
• moveTo(x, y) : 아무것도 그리지 않고 시작점을 (x,y) 좌표로 이동 (≒ 펜을 종이 위에서 들어 옆으로 옮기는 것)
• lineTo(x, y) : 현재의 위치에서 (x,y) 좌표까지 선을 그리기 (준비)
  • 시작점은 이전에 그려진 경로에 의해 결정되며, moveTo() 메소드를 통해 변경할 수 있습니다.
  • 실제로 경로를 화면에 출력하려면 마지막에 (상황에 따라) ctx.stroke() 또는 ctx.fill() 메소드를 호출해야 합니다. 호출 전에는 경로의 끝점을 의미합니다.
• translate(x, y) : 원점을 (x,y) 좌표로 변경
• save() : 선 굵기, 색상, 스타일등을 포함한 모든 현재 캔버스 상태(canvas state)를 스택에 저장
• restore() : 최근에 스택에 저장되었던 캔버스 상태로 복원
  • save()와 restore() 사이에 발생한 변경사항은 저장되지 않습니다. 
  • 스택에 저장된 캔버스 상태가 없다면 아무 변화도 일어나지 않습니다.

 

 

기본 프로퍼티

드로잉 컨텍스트 ctx 의 다양한 프로퍼티를 이용하여 도형의 속성을 설정할 수 있습니다.

• fillStyle : 도형을 채우는 색 설정
• strokeStyle : 도형의 윤곽선 색 설정
• lineWidth : 도형의 윤곽선 굵기 설정
• : 선의 양 끝점의 모양을 설정
  • butt: 각진 사각형 끝점 / round: 둥근 끝점 / square: 각진 사각형 끝점(동일width, 1/2height의 상자를 양끝점에 추가)
• lineJoin : 두 선이 만나는 꼭지점(corner)의 스타일을 설정
  • bevel: 울퉁불퉁한 모서리 / round: 둥근 모서리 / miter: 뾰족한 모서리
• font : 문자열의 font weight, family, size를 변경

 

 

직사각형 그리기

x와 y는 캔버스 좌측 상단, 즉 원점(0,0)으로부터의 상대적인 위치(좌표값)를 의미합니다. width와 height는 사각형의 너비와 높이를 의미합니다. 

• rect(x, y, width, height) : 직사각형 그리기
  • rect() 메소드가 실행되기 전에 moveTo(x,y) 메소드가 자동으로 호출되기 때문에, 현재의 펜 위치가 기본 좌표(0,0)로 초기화 됩니다. 
  • rect() 메소드 호출 후, stroke() 또는 fill()을 호출해야 렌더링되는 것을 확인 할 수 있습니다.
• fillRect(x, y, width, height) : 색칠된 직사각형 그리기
• strokeRect(x, y, width, height) : 직사각형 윤곽선 그리기
• clearRect(x, y, width, height) : 특정 부분을 지우는 직사각형 그리기; 지워진 부분은 투명한 상태

 

 

호(arc) 그리기

 

출처 : https://www.w3schools.com/tags/canvas_arc.asp

 

• arc(x, y, radius, startAngle, endAngle)
  • (x,y) 위치에 원점을 두면서, 반지름 radius를 갖고, 시작각(startAngle)에서 시작하여 끝각(endAngle)에서 끝나는 원 또는 호를 그립니다.
• arc(x, y, radius, startAngle, endAngle, counterclockwise) 
  • 6번째 파라미터는 선택사항이며, 주어진 방향(clock/anticlockwise)으로 향하는 호를 그립니다. 초기값은 false이며 시계방향으로 호를 그립니다. 값을 true로 변경하면 반시계방향으로 호를 그립니다.

arc() 함수에서 각도(startAngle, endAngle)는 각(˚)이 아닌 라디안 단위로 표시합니다. 각도를 라디안으로 바꾸는 javascript 코드는 radians=(Math.PI/180)*degrees 입니다.

육십분법의 각	0˚	30˚	45˚	60˚	90˚	180˚	270˚	360˚
호도법의 각	0	π/6	π/4	π/3	π/2	π	1.5π	2π

 

 

텍스트 추가하기

fillText() 메소드 함수는 지정된 캔버스 좌표에 문자열을 그립니다. stokeText() 메소드 함수는 지정된 캔버스 좌표에 문자열의 윤곽선을 그립니다. 두 함수 모두 선택적 매개변수인 maxWidth를 통해 출력될 문자열의 최대 너비를 설정할 수 있습니다. 

• fillText(text, x, y)
• fillText(text, x, y, maxWidth)
• strokeText(text, x, y)
• strokeText(text, x, y, maxWidth)

또한 현재 경로(path)와 상관없이 직접 캔버스에 그려지기 때문에 이후 fill()이나 stroke() 함수를 호출해도 효과가 발생하지 않습니다.

 

 

 

※ 참고자료

1. MDN web docs : https://developer.mozilla.org/ko/docs/Web/API/Canvas_API

2. 이성근쌤의 메가마인드수학 : https://m.blog.naver.com/biomath2k/221867576248