Canvas tutorial #3 (Curves)

※ 이 글은 예전 블로그에서 퍼왔으며 2020.3.2.에 작성된 글입니다.

※ 이 글은 해당사이트를 번역한 것입니다.

---

arc(호, 원호)

원의 호를 그리기 위해선 arc( )를 사용할 수 있다.

호는 중심점, 반지름, starting angle, ending angle, 회전방향(시계방향, 반시계방향)으로 정의된다.

호는 lineWidth, strokeStyle, lineCap속성을 가질 수 있다.

​

호는 가상의 원의 원주의 한 부분에 지나지 않는다. 이 가상의 원은 x, y, radius 로 정의할 수 있다.

​

그런 다음 startAngle과 endAngle로 정의된 가상의 원의 둘레를 따라 두개의 점으로 호를 정의 할 수 있다.

​

두 각들은 반지름으로 정의되며, 원의 중심에서 우리가 생성하려는 호의 끝을 교차하는 가상의 선을 생성한다.

​

호의 마지막 속성은 두 점사이의 호 경로(회전방향)을 정의하는 antiClockwise입니다. 특별한 명시가 없으면 이 속성은 default 값으로 false를 가지게 되고 호를 시계 방향으로 그린다.

context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
/*
x: x좌표
y: y좌표
startAngle: 시작점 각도 값
endAngle: 끝점 각도 값
counterClockwise: 회전방향
*/

---

Quadratic Curve(이차 곡선)

이차 곡선을 그리기 위해선 quadraticCurveTo( )를 사용할 수 있다.

이차 곡선은 context point, control point, ending point로 정의된다.

이차 곡선은 lineWidth나 strokeStyle, lineCap 속성을 지닐 수 있다.

control point는 이차 곡선의 곡률을 context point와 ending point에 연결된 두 개의 가상 접선에 따라 정의한다.

​

control point가 context point와 ending point로 부터 멀어질수록 더 선명한 곡선이 생성되고 가까워질수록 더 넓은 곡선이 만들어 진다.

context.moveTo(x,y); // context point(시작점) 설정
context.quadraticCurveTo(cpx, cpy, x, y);
/*
cpx, cpy: control point 설정
x, y: ending point 설정
*/

---

Bezier Curve(베지에 곡선)

베지에 곡선을 그리기 위해선 bezierCurveTo( )를 사용할 수 있다.

베지에 곡선은 context point, 두 개의 control point, ending point으로 정의된다.

이차 곡선과는 달리 베지에 곡선은 하나가 아닌 두 개의 기준점으로 정의되므로 더 복잡한 곡성을 작성할 수 있다.

베지에 곡선은 lineWidth, strokeStyle, lineCap속성을 가질 수 있다.

베지에 곡선은 current context point와 두 개의 control points, ending point​​로 정의된다.

곡선의 첫번째 부분은 context point와 control point 1에 의해 정의된 가상선과 접선한다.

곡선의 두번째 부분은 control point 2와 ending point에 의해 정의된 가상선과 접선한다.

context.moveTo(x, y); // context point(시작점) 설정
context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
/*
cp1x, cp1y: control point 1 설정
cp2x, cp2y: control point 2 설정
x, y: ending point 설정
*/

---

+ 참고하면 좋은 글들

중학생도 알 수 있는 베지에 곡선(Bezier Curves)

 

프런트엔드 엔지니어를 위한 베지에 곡선(Bezier Curves) - 1편