[javascript] Canvas - 메서드

const context = canvas.getContext("2d");

사각형 그리기

fillRect : 사각형을 그리기 시작할 시작점의 x, y좌표와 사각형의 너비, 높이 등을 설정함.

fillStyle : 사각형 영역을 채울 색상을 설정함. 색상값만을 사용할 수도 있고, 투명도까지 명시할 수 있음.

clearRect : 지정된 사각형 영역을 투명하게 만듦.

strokeRect : 사각형 영역에 테두리를 그릴 때 사용함.

context.fillRect(0, 0, 100, 100); 
//(0.0)에서 시작해서 width=100 heigt=100 만큼 그린다.

선 그리기

beginPath : 그리기 시작

moveTo : 선이 시작될 좌표를 설정함.

lineTo : 선이 끝나는 좌표를 설정함.
lineTo() 함수를 연속적으로 사용할 때의 시작 위치는 이전 선 그리기가 끝난 위치로 자동 설정됨.

stroke : 선 그리기 시작함.

fill : 채운다.

closePath : 그리기 끝

원 그리기

beginPath : 그리기 시작

arc : 원을 그리며 인자로 6개의 값을 아래와 같이 받는다.

1. 원의 중심 x좌표

2. 원의 중심 y좌표

3. 원의 반지름 (만약 50설정하면 지름은 100이된다.)

4. 원호를 그리기 시작할 각도

5. 원호 그리기를 마칠 각도

6. 방향 (시계방향 - false / 반시계방항 - true)

주의 할 점 : 각도의 값은 라디안으로 받기 때문에 라디안을 구하는 유틸 함수를 구현 후 각도를 설정해야 한다. 유틸함수는 아래와 같다.

    function 라디안(각도) {
        return 각도 * Math.PI / 180;
      }
// 1도의 라디안 값은 1 * 파이 / 180 이다.

참고: http://tcpschool.com/html/html5_graphic_canvas