하코사세미나_캔버스 파이그래프 만들기

I♥HACOSA

황선수

I♥HACOSA

CONTENTSⅠ

Ⅱ

Ⅲ

I♥HACOSA목적 및기대효과

I♥HACOSA목적 및기대효과

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

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

http://kin.naver.com/bingo/bingoHome.nhn

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

I♥HACOSA파이그래프 이슈사항

이미지를 여러개만들어야되서유지 관리가불편해요!

이거 GIF 이미지로 갈까요?


그러면 이렇게각도가커졌을 때문제가생겨요!

그럼 CSS로 도형을 이렇게만들어서 하면안될까요?


GIF 애니메이션이미지 (속칭 :움짤)

• 장점 : 브라우저이슈없음

• 단점 : 각단계별로모두이미지를만들어야해서유지관리가어렵고재사용성낮음


CSS Animation

• 장점 : CSS만으로구현

• 단점 : CSS3속성이므로브라우저이슈발생,일부분을숨겨서호처럼보이지만정확한영역이라고보기어려움

한쪽을숨김

반원이 돌면서나타남

반대편 반원완성되면숨김해제

기존반원은계속회전

뒤에다른반원등장

CSS 애니메이션으로 만들기!

http://hwangsunsoo.com/seminar/hacosa-161210/cssPieGraph.html


캔버스

• 장점 : 호영역을연산하여표현하기때문에정확하며스크립트를잘구현하면재사용성이높고유지관리용이함

• 단점 : IE9부터사용가능 (excanvas를이용하면IE7~8도지원가능)

http://hwangsunsoo.com/seminar/hacosa-161210/canvasPieGraphTest.html


그러지말고 제가 캔버스로만들어서 테스트 해볼게요!

황선수

-_-;;

황 선 수 (29) / 멘붕 회사원


1)영혼이 빠져나간다. 2) 뭔가 조금씩 보인다. 3) 결국 해낸다.

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

<Canvas>




1. <canvas>의DOM 객체를 얻는다

2. DOM 객체로부터 2D 컨텍스트를 얻는다

3. 이후작업은 ‘컨텍스트'를 통해이루어진다





360도를전체조각 수로나누고표현할 조각만큼 곱함

애니메이션 효과를 나타내기 위해추가로 20등분해서빠르게 다시그림


X좌표, Y좌표, 반지름, 시작지점, 종료지점, 방향


Degree

원을 360 등분하여 표현

(사람에게 익숙한단위)

Radian

호의길이가 반지름과 같게되는만큼의 각

(수학, 컴퓨터에서 사용하는 단위)


Radian

호의길이가 반지름과 같게되는만큼의 각

(수학, 컴퓨터에서 사용하는 단위)


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);

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

I♥HACOSA

Internet

하코사세미나_캔버스 파이그래프 만들기