[Canvas] canvas 9. path도형 그리기 - 2차곡선,베지어곡선

다음 속성으로는 베지어 곡선에 대해서 알아보겠습니다.

입방체 혹은 정사각형에 사용할수있는 곡선인데요. 이게 말로는 참 설명하기 거시기 한것이긴하지만

여차저차 설명은 해보겠습니다.

quadraticCurveTo(cp1x, cp1y, x, y) // 파폭 1.5에서 동작하지 않는듯.

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

곡선을 나타내는 두개의 함수가 있는데요 둘다  용도가 비슷한듯하지만 많이 다릅니다.

일단 이미지를 한번 보시겠습니다.

[사진출처]모질라 캔바스 튜토리얼

quadraticCurveTo 함수는 이미지에서 보듯이 곡선의 기준점이 하나입니다.

cp1x,cp1y 두개의 기준점과 x,y 라인의 끝점. 

두개의 좌표값으로 곡선을 그리게 됩니다.

학교시절 배운 2차원 곡선에대해서 떠올리면 쉬울것같은데요. 

여기에서 기준점이 하나 더 추가된것이 베지어 곡선입니다.

베지어곡선은 무슨 베지어란양반이 포드자동차를 CAD로 디자인하면서 썼는데 그게 유명해져서

그의 이름이 붙었다고합니다.

베지어가 고안한것은아니고 사실 그 개념은 그이전부터 존재했다고 하니 창시자는 아니겠네요.

사설이 길어졌는데. 베지어 곡선은 그림으로는 설명이 부족하니 위키피디아 이미지를 잠깐 인용해보겠습니다.

[사진출처] 위키피디아.

위와같은 곡선이 그려지게 됩니다. 이제 베지에곡선의 포인트가 두개인 이유를 아시겠지요?

P1, P2 가 곡선의 포인트 좌표가되고 P3이 곡선이 끝나는좌표, x,y 가 되는겁니다. 

물론 베지에 곡선은 기준점이 2개가 아니라 n개 즉 여러개가 될수있고 2차원 그래프가아닌3차 4차원 그래프도

그려질수 있으며

일부 폰트에서 글자를 부드럽게 하는데도 사용된다고 합니다.... 만

지원하는 함수에서는 2포인트만 지원하는군요. 뭐 이정도면 충분하고 응용법도 있으니 괜찮습니다.

그럼 먼저 quadraticCurveTo 를 이용해서 말풍선을 하나 그려보겠습니다. 

// Quadratric curves example  

ctx.beginPath();  

ctx.moveTo(75,25);  

ctx.quadraticCurveTo(25,25,25,62.5);  

ctx.quadraticCurveTo(25,100,50,100);  

ctx.quadraticCurveTo(50,120,30,125);  

ctx.quadraticCurveTo(60,120,65,100);  

ctx.quadraticCurveTo(125,100,125,62.5);  

ctx.quadraticCurveTo(125,25,75,25);  

ctx.stroke();  

[사진출처]모질라 캔바스 튜토리얼

따로 예제는 제공하지 않겠습니다.  

그리고 이번에는 베지에함수를 이용한 하트.

// Bezier curves example  

ctx.beginPath();  

ctx.moveTo(75,40);  

ctx.bezierCurveTo(75,37,70,25,50,25);  

ctx.bezierCurveTo(20,25,20,62.5,20,62.5);  

ctx.bezierCurveTo(20,80,40,102,75,120);  

ctx.bezierCurveTo(110,102,130,80,130,62.5);  

ctx.bezierCurveTo(130,62.5,130,25,100,25);  

ctx.bezierCurveTo(85,25,75,37,75,40);  

ctx.fill();  

[사진출처]모질라 캔바스 튜토리얼

역시 예제는 따로 제공하지 않습니다.

p.s : 파폭 1.5 에서는 quadraticCurveTo 함수에 뭔가 치명적인 버그가 있다고 합니다만

1.5 버젼까지 설치해서 테스트 해볼 생각이 없습니다. 알고만 계시면 될것같네요.