도형 그리기 3

* 베지에 곡선 그리기

- 베지에 곡선은 제어점을 이용하여 그려지는 곡선임.

- 왠지 복잡하고 어려울 것 같은 이미지가 떠오르지만, 다양한 곡선을 직관적으로 그릴 수 있음.

 

프로퍼티 및 메서드	기능
quadraticCurveTo(cpx, cpy, x, y)	제어점이 하나인 2차 베지에 곡선을 그림.  cpx와 cpy로 제어점의 좌표를, x와 y로 패스 그리기의 끝점의 좌표를 지정함.
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)	제어점이 2개인 3차 베지에 곡선을 그림.  cp1x와 cp1y로 첫 번째 제어점의 좌표를, cp2x와 cp2y로 두번째 제어점의 좌표를, x와 y로 패스 그리기의 끝점의 좌표를 지정함.

 

cvs.moveTo(0, 0);

cvs.quadraticCurveTo(50, 100, 100, 0);

 

cvs.moveTo(200, 0);

cvs.bezierCurveTo(300, 50, 100, 50, 200, 100);

 

* 원을 이용한 곡선

- canvas에서는 원을 그릴 수 있음.

- 원은 arc() 메서드로 그림.

 

arc(x, y, radius, startAngle, endAngle, anticlockwise);

    : 원의 중심 좌표

    : 원의 반지름

    : 그리기를 시작 및 종료할 각도(라디안으로 지정)

    : 원을 그릴 방향. true는 반시계 방향, false는 시계 방향.

 

- 예)

cvs.arc(100, 100, 100, 0, Math.PI*2, false);

                              π의 값은 Math.PI로 나타냄.

 

- 각도를 지정하면 부채꼴을 나타낼 수도 있음

 

cvs.moveTo(500, 100);

cvs.arc(500, 100, 100, Math.PI/3, Math.PI, false);

cvs.lineTo(500, 100);

 

- 원호를 그리기 위한 arcTo()라는 메서드도 있음.

- '현재 좌표-좌표1', '좌표1-좌표2'의 두 직선에 접하는 반지름 r의 원호를 그림.

 

arcTo(x1, y1, x2, y2, radius);

 

 

내용 출처 : HTML5가 보이는 그림책 (ANK Co., Ltd 저, 성안당)