[그래픽 처리] 렌더링 메서드/arc(), arcTo()/quadraticCurveTo(), bezieCurveTo()/rect()

[그래픽 처리] 렌더링 메서드/arc(), arcTo()/quadraticCurveTo(), bezieCurveTo()/rect()

[1] 원호 렌더링 - arc(), arcTo()

1. arc() 메서드

context.arc(x, y, 반경, 시작 각도, 종료 각도, 반시계방향 지정)

여기서 '반시계 방향 지정'을 true로 하면 시계방향으로 원호를 그립니다.
각도는 '라디안(radian)'이므로 '도(degree)'를 '라디안(rad)'으로 변환해야 할 때 아래의 계산식을 사용하면 됩니다.

var rad = deg*Math.PI / 180;   

 arc() 메서드로 원호를 그리는 프로그램 예제입니다.

※stroke() : 패스의 테두리 렌더링

 
원호가 아닌 완전한 원을 그리고 싶을 때는 arc() 메서드의 인수를 0도에서 360도로 지정하면 됩니다.
위 코드의 패스 지정에서 'startAngle'을 0, 'endAngle'을 360으로 바꾸어 주기만 하면 됩니다.

위의 코드 말고 아래 코드를 이용해도 완전한 원을 그릴 수 있습니다.

2. arcTo() 메서드

arcTo() 메서드 또한 원호를 렌더링하는 메서드입니다.
arcTo() 메서드는 패스 종료 지점에서 좌표(x1,y1)과 (x2,y2)를 통과하는 선을 그은 후 , 지정된 반경만큼 호를 그립니다.

context.arcTo(x1,y2,x2,y2,반경)

[2] 베지에 곡선 렌더링 - quadraticCurveTo(), bezieCurveTo()

1. quadraticCurveTo() 메서드는 2차 베지에 곡선을 렌더링하는 메서드입니다.
마지막으로 지정한 점으로부터 특정 좌표(x, y)까지 2차 베지에 곡선을 긋습니다.
이때, (cpx, cpy)가 조절점의 좌표가 됩니다.

context.quadraticCurveTo(cpx, cpy, x, y)

2. bezieCurveTo() 메서드는 3차 베지에 곡선을 렌더링하는 메서드입니다.
3차 베지에 곡선은 2개의 조절점을 지정합니다.

context.bezieCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

 

 

[3] 사각형 렌더링 - rect()

rect() 메서드는 사각형을 렌더링하는 메서드입니다.
rect() 메서드는 사각형을 그리기 때문에 '~To()'로 끝나는 메서드 처럼 패스에 좌표를 추가하는 것이 아니라 왼쪽 위의 시작점(x, y)으로 부터 지정한 너비와 높이만큼의 사각형을 그립니다.

context.rect(x, y, 너비, 높이)