DOM Canvas 곡선 그리기

주요 원(호) 그리기 함수

	설명
beginPath()	패스 그리기를 선언한다.
closePath()	패스를 닫는다.
arc(x, y, radius, startAngle, endAngle, articlockwise)	원을 그린다. - x, y : 원점 - radius : 반지름 - startAngle : 원이 시작되는 지점 (0 <= startAngle <= 2*Math.PI) - endAngle : 원이 종료되는 위치 (0 <= endAngle <= 2*Math.PI) - articlewise : 원을 그리는 방향 설정 false : startAngle에서 endAngle만큼 시계반대 방향으로 원을 그려나간다. true : startAngle에서 endAngle만큼 시계방향으로 원을 그려나간다.
artTo(x1, y1, x2, y2, radius)	두 직선 사이의 호를 그릴 때 사용되는 함수이다.  자세한 사용방법은 아래 섹션에서 확인하시길 바란다.
quadraticCurveTo(cx, cy, x, y);	제어점이 한개인 2차 베지어곡선을 그린다.
bezierCurveTo(cx1, cy1, cx2, cy2, x1, y1)	제어점이 2개인 3차 베지어곡선을 그린다.

 

 

 

arc 함수

 아래의 예제는 원을 그리는 예제이다.

정확하게 설명하자면 0에서 2PI만큼 (50, 50)을 원점으로 50픽셀의 반지름만큼 그린 예제이다.

마지막 인수의 경우 원의 경우, 큰 의미가 없지만, 호를 그릴경우 중요한 변수이다.

1. function draw(target) {

2.     var canvas = document.getElementById("draw");

3.  

4.     // 지원 여부 체크

5.     if (canvas.getContext) {

6.         // HTML5에서 canvas를 지원시

7.  

8.         // 그리기 오브젝트를 받음

9.         var ctx = canvas.getContext('2d');

10.  

11.         ctx.beginPath();

12.         // 캔버스 크기는 100x100이상이 되어야 재대로 나온다.

13.         ctx.arc(50, 50, 50, 0, Math.PI * 2, true);

14.         ctx.closePath();

15.         ctx.stroke();

16.     }

17. }

 

arcTo 함수

두 직선 사이의 호를 그릴 때 사용되는 함수이다.

 

arcTo 함수는 절대 혼자서 사용할 수 없으며,

moveTo와 lineTo의 도움을 받아야 원하는 로직을 작성 할 수 있다.

 

먼저 정의를 하고 설명하도록 하겠다.

moveTo로 입력받는 매개변수는 (x0, y0)

arcTo로 입력받는 매개변수는 (x1, y1, x2, y2, radius )

lineTo로 입력받는 매개변수는 (x2, y2) 의 조건을 만족해야 한다.

 

이때 두 점 (x0, y0), (x1, y1)로 연결되는 선을 l1,

(x1, y1), (x2, y2)로 연결되는 선을 l2라고 하자.

 

여기서 (x1, y1)은 교차점을 의미하므로, 두 선 l1, l2는 반드시 평행하지 않도록 주의해야 한다.

 

 

 

이때 지름이 radius이고 두 선 l1, l2와 내접하는 원을 아래와 같이 그린다.

(x0, y0)과 내접하는 원의 점, 그리고 바깥쪽의 원, 그리고 내접하는 원의 점과 (x2, y2)에 선이 

아래 빨간 선처럼 그어지게 된다.

 

 

 

결국 결과적으로 보면 두 선 사이에 원형 곡선을 그릴 때 사용한다고 생각하면 된다.

 

 

 

1. function draw(target) {

2.     var canvas = document.getElementById("draw");

3.  

4.     // 지원 여부 체크

5.     if (canvas.getContext) {

6.         // HTML5에서 canvas를 지원시

7.  

8.         // 그리기 오브젝트를 받음

9.         var ctx = canvas.getContext('2d');

10.  

11.         /* 호 그리기 */

12.         ctx.moveTo(10, 200);

13.         ctx.arcTo(200, 200, 200, 10, 100);

14.         ctx.lineTo(200, 10);

15.         ctx.stroke();

16.  

17.     }

18. }

결과

두 선사이에 원에 의해서 부드럽게 그려졌음을 확인 할 수 있다.

 

 

quadraticCurveTo 함수 (2차 베이지 곡선)

(x0, y0)과 (x1, y1)사이의 선 사이에 제어점(cx, cy)를 설정하여 접선에 의하여 제어받는 곡선을 그린다.

아래의 이미지 및 애니메이션을 참조하자.

 

 

javascript

1. function load(target) {

2.     // 실제로 그려지는 위치의 캔버스 생성

3.     var canvas = document.getElementById("draw");

4.     ctx = canvas.getContext("2d");

5.    

6.     ctx.beginPath();

7.     ctx.moveTo(0, 0);

8.     ctx.quadraticCurveTo(200, 0, 200, 200);

9.     ctx.stroke();

10. }

결과

 

 

 

bezierCurveTo(cx1, cy1, cx2, cy2, x1, y1)

두 점 (x0, y0), (x1, y1) 사이에 제어점이 2개를 설정하여 접선에 의하여 제어받는 곡선을 그린다.

아래의 이미지 및 애니메이션을 참조하자.

 

 

 

 

1. function load(target) {

2.     // 실제로 그려지는 위치의 캔버스 생성

3.     var canvas = document.getElementById("draw");

4.     ctx = canvas.getContext("2d");

5.    

6.     ctx.beginPath();

7.     ctx.moveTo(0, 100);

8.     ctx.bezierCurveTo(100, 0, 200, 200, 300, 100);

9.     ctx.stroke();

10. }

11.  

결과