Canvas tutorial #4 (Paths)

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

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

---

Path(경로)

여러 하위 경로를 연결하여 경로를 생성할 수 있다. 각각의 새 하위 경로의 ending point는 새로운 context point가 된다.

각각의 하위 경로를 구성하는 방법으로 lineTo( )와 arcTo( ), quadraticCurveTo( ), bezierCurveTo( )가 있다.

또한 새로운 경로를 그릴때 마다 beginPath( )를 이용할 수 있다.

context.beginPath();
context.moveTo(x, y);

// line 1
context.lineTo(x, y);

// quadratic curve
context.quadraticCurveTo(cpx, cpy, x, y);

// bezier curve
context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);

// line 2
context.lineTo(x, y);

context.lineWidth = 5;
context.strokeStyle = "blue";
context.stroke();

---

Line Join(선 결합)

선을 결합하는 방식을 설정하기 위해 LineJoin 컨텍스트 속성을 설정할 수 있다.

path는 3가지의 선 결합 속성을 지닌다: miter, round, bevel

특별한 명시가 없을 경우엔 miter 속성을 지닌다.

context.lineJoin = "value"; // value(miter, round, bevel)를 lineJoin값으로 부여함.

---

Rounded Corner(둥근 모서리)

둥근 모서리를 구현하기 위해선 arcTo( )를 사용할 수 있다.

arcTo( )는 control point와 ending point, radius 로 정의된다.

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