HTML5 Canvas Shapes 2

아래와 같은 모서리가 둥근 사각형을 그려보자.

 

위 도형을 모서리를 처리하기 위하여 quadraticCurveTo 메서드에 대해서 먼저 알아야 한다.

context.quadraticCurveTo(controlX, controlY, endX, endY);

quadraticCurveTo 메서드 동작원리

(출처 : html5canvastutorials)

context point로 moveTo 메서드를 사용하여 point를 이동 후 control point 좌표를 quadraticCurveTo 메서드 인자 controlX, controlY에 지정한다. endX, endY 인자는 곡선의 끝 점을 지정한다.

quadraticCurveTo 메서드를 이용하여 모서리가 둥근 사각형을 그려보자.

위 소스의 도형 그리기 순서는 아래 표와 같다.

ⓛ 15라인	② 16라인
③ 17라인	④ 18라인
⑤ 19라인	⑥ 20라인
⑦ 21라인	⑧ 22라인

위 소스를 이용하여 개인적으로 활동하는 커뮤니티 사이트 로고를 한번 만들어보겠다.
위 도형에 텍스트와 이미지를 추가하는 수준이다. 소스는 별다를게 없다.

위 소스에서 새롭게 등장한 text관련 메서드와 이미지 관련 메서드는 다음 강좌에서...-_-;