1.CanVas 2. SVG 3. Canvas VS SVG 4. Reference

1. HTML
Graphics API
2014. 11. 24
Version : 1.0.0
This material is proprietary to DGMIT. It contains trade secrets and confidential information which is solely the property of DGMIT.
This material is solely for the Client’s internal use. This material shall not be used, reproduced, copied, disclosed, transmitted,
in whole or in part, without the express consent of DGMIT © All rights reserved.
made by 정보배
R&D

2. 2
CONTENTS.
1. Canvas ……………… 3
2. SVG ………………...... 4
3. Canvas vs SVG … 7
4. Reference ………… 10

3. 3
1.
Canvas
브라우저 위의 그림판
Canvas : 선, 도형, 텍스트, 이미지와 같은 그래픽을 표현하는 브라우저 위의 그림판
Canvas 장점
- 간단하게 사용 가능
- 많은 개체를 필요로 하는 게임의 경우 속도가 빠름
- .png, .jpg로 저장 가능
Canvas 단점
- 이벤트 핸들러와 연결 가능
- CSS를 통해 수정 할 수 없음
- 픽셀 단위로만 컨트롤이 가능
- 텍스트 렌더링에 약함

4. 4
2.
SVG
SVG(Scalable Vector Graphics) : XML에서 2차원 벡터 그래픽을 위한 언어
SVG 장점
- 이벤트 핸들러와 연결 가능
- 유연성 제공
- CSS를 통해 간단하게 개체를 수정 가능
SVG 단점
- DOM 개체가 많을 경우 성능이 저하 됨
- 게임 같은 곳에 적합하지 않음
Scalable Vector Graphics

5. 5
2.
SVG
예제)
Result:
Scalable Vector Graphics

6. 6
2.
SVG
예제)
Result:
Scalable Vector Graphics

7. 7
3.
Canvas vs SVG
같지만 서로 다른 두 가지 그래픽 API

8. 8
3.
Canvas vs SVG
같지만 서로 다른 두 가지 그래픽 API

9. 9
3.
Canvas vs SVG
같지만 서로 다른 두 가지 그래픽 API

10. 10
4.
Reference
- http://msdn.microsoft.com/ko-kr/library/dn265058(v=vs.85).aspx
- http://www.w3schools.com/tags/ref_canvas.asp
- http://techbug.tistory.com/207
- http://poohkey.blog.me/10142697086
- https://github.com/mrdoob/three.js
- http://raphaeljs.com/
- http://msdn.microsoft.com/ko-kr/library/gg193983(v=vs.85).aspx
…

11. 11
본사/기업부설연구소 : 135-874 서울특별시 삼성동 봉은사로 424 TROA빌딩 5층
Tel. 070-8680-1770 Fax. 02-2179-9114 http://www.dgmit.com