본문 바로가기

html5

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관련 메서드와 이미지 관련 메서드는 다음 강좌에서...-_-;

'html5' 카테고리의 다른 글

HTML5 Video  (0) 2011.05.12
HTML5 Canvas Shapes 1  (0) 2011.04.20
HTML5 Canvas Line2  (0) 2011.04.19