연사: 황선수닷컴 주제: 캔버스 파이그래프 만들기 부제: 지식iN 알아가기 빙고 적용 사례 개요: 지식iN에 포함된 파이그래프 실무 적용 사례와 캔버스로 파이그래프를 만드는 방법을 공유합니다.

2. I♥HACOSA
황선수

3. I♥HACOSA
CONTENTS Ⅰ
Ⅱ
Ⅲ

4. I♥HACOSA목적 및 기대효과

5. I♥HACOSA목적 및 기대효과

6. I♥HACOSA지식iN 알아가기 빙고

7. I♥HACOSA지식iN 알아가기 빙고
http://kin.naver.com/bingo/bingoHome.nhn

8. I♥HACOSA진행상황을 나타내는 파이그래프

9. I♥HACOSA파이그래프 이슈 사항
이미지를 여러 개 만들어야
되서 유지 관리가 불편해요!
이거 GIF 이미지로 갈까요?

10. I♥HACOSA파이그래프 이슈 사항
그러면 이렇게 각도가
커졌을 때 문제가 생겨요!
그럼 CSS로 도형을 이렇게
만들어서 하면 안될까요?

11. I♥HACOSA파이그래프 이슈 사항
GIF 애니메이션 이미지 (속칭 : 움짤)
• 장점 : 브라우저 이슈 없음
• 단점 : 각 단계별로 모두 이미지를 만들어야 해서 유지관리가 어렵고 재
사용성 낮음

12. I♥HACOSA파이그래프 이슈 사항
CSS Animation
• 장점 : CSS만으로 구현
• 단점 : CSS3 속성이므로 브라우저 이슈 발생, 일부분을 숨겨서 호처럼
보이지만 정확한 영역이라고 보기 어려움
한 쪽을 숨김
반원이 돌면서
나타남
반대편 반원
완성되면
숨김해제
기존 반원은
계속 회전
뒤에 다른
반원 등장
CSS 애니메이션으로 만들기!
http://hwangsunsoo.com/seminar/hacosa-161210/cssPieGraph.html

13. I♥HACOSA파이그래프 이슈 사항
캔버스
• 장점 : 호 영역을 연산하여 표현하기 때문에 정확하며 스크립트를 잘 구
현하면 재사용성이 높고 유지 관리 용이함
• 단점 : IE9부터 사용가능 (excanvas를 이용하면 IE7~8도 지원가능)
http://hwangsunsoo.com/seminar/hacosa-161210/canvasPieGraphTest.html

14. I♥HACOSA파이그래프 이슈 사항
그러지말고 제가 캔버스로
만들어서 테스트 해볼게요!
황선수
-_-;;
황 선 수 (29) / 멘붕 회사원

15. I♥HACOSA파이그래프 이슈 사항
1) 영혼이 빠져 나간다. 2) 뭔가 조금씩 보인다. 3) 결국 해낸다.

16. I♥HACOSA캔버스 파이그래프 만들기
<Canvas>

17. I♥HACOSA캔버스 파이그래프 만들기

18. I♥HACOSA캔버스 파이그래프 만들기

19. I♥HACOSA캔버스 파이그래프 만들기
1. <canvas>의DOM 객체를 얻는다
2. DOM 객체로부터 2D 컨텍스트를 얻는다
3. 이후 작업은 ‘컨텍스트'를 통해 이루어진다

20. I♥HACOSA캔버스 파이그래프 만들기

21. I♥HACOSA캔버스 파이그래프 만들기

22. I♥HACOSA캔버스 파이그래프 만들기

23. I♥HACOSA캔버스 파이그래프 만들기
360도를 전체조각 수로 나누고 표현할 조각만큼 곱함
애니메이션 효과를 나타내기 위해
추가로 20등분해서 빠르게 다시 그림

24. I♥HACOSA캔버스 파이그래프 만들기
X좌표, Y좌표, 반지름, 시작지점, 종료지점, 방향

25. I♥HACOSA캔버스 파이그래프 만들기
Degree
원을 360 등분하여 표현
(사람에게 익숙한 단위)
Radian
호의 길이가 반지름과 같게 되는 만큼의 각
(수학, 컴퓨터에서 사용하는 단위)

26. I♥HACOSA캔버스 파이그래프 만들기
Radian
호의 길이가 반지름과 같게 되는 만큼의 각
(수학, 컴퓨터에서 사용하는 단위)

27. I♥HACOSA캔버스 파이그래프 만들기
cx.arc(centerX, centerY, centerY,
-0.5 * Math.PI, rad - 0.5 * Math.PI, false);
cx.arc(centerX, centerY, centerY,
1.5 * Math.PI, rad + 1.5 * Math.PI, false);

28. I♥HACOSAReference
§ Play with Canvas : 삼각함수
http://yangpro.github.io/play-with-canvas-trigonometry/
§ 위키백과 : 라디안
https://ko.wikipedia.org/wiki/%EB%9D%BC%EB%94%94%EC%95%88
§ 네이버캐스트 : 라디안
http://navercast.naver.com/contents.nhn?rid=22&contents_id=857
Source Code
§ 예제
http://hwangsunsoo.com/seminar/hacosa-161210/index.html

29. I♥HACOSA