HTML5 캔버스 완벽 가이드(위키북스 오픈소스 웹 시리즈 45)

HTML5 캔버스 개발의 모든 것!

이 책은 HTML5와 자바스크립트를 이용해 캔버스에 직선을 그리는 방법부터 핀볼 게임을 구현하는 방법까지 모든 과정을 담고 있다.

책의 전반부에서는 도형 및 텍스트를 캔버스에 그리는 방법과 이미지를 조작하고 그리는 방법을 소개하는 캔버스 API를 다룬다. 후반부에서는 캔버스 API를 사용해 애니메이션과 움직이는 스프라이트를 구현하고 시뮬레이션 생성, 충돌 감지, 비디오 게임을 개발하는 방법을 소개한다. 또한 모바일에서도 실행할 수 있는 실제 애플리케이션을 구현할 수 있도록 사용자 정의 컨트롤을 구현하는 방법과 캔버스 기반 모바일 애플리케이션을 제작하는 방법도 다룬다. HTML5 캔버스를 이용하면 플래시와 같은 플러그인을 설치하지 않고도 웹에서 작동하는 게임을 개발할 수 있다. 이 책에서는 캔버스 API뿐 아니라 게임 개발에 필요한 수학/물리 관련 기초 지식(삼각함수, 중력, 가속도, 충돌 처리)까지 자세히 설명한다. 이 책의 웹사이트 (www.wikibook.co.kr/wiki/Wiki.jsp?page=HTML5Canvas)에서 각 예제를 직접 실습해 볼 수 있으며, 이미지 조작, 애니메이션, 충돌 감지, 게임, 모바일 등 전 분야에 걸친 다양하고 풍부한 예제를 다루고 있어 캔버스 개발에 막 입문한 초보자부터 게임 개발에 캔버스를 사용하려는 개발자까지 모두 이 책을 활용할 수 있다.



HTML5에서 제공하는 기능 가운데 하나인 캔버스에서는 워드 프로세스부터 비디오 게임에 이르기까지 모든 애플리케이션을 구현할 수 있는 강력한 2D 그래픽 API를 제공하고 있다. 베스트셀러 작가인 데이비드 기어리가 집필한 《HTML5 캔버스 완벽 가이드(Core HTML5 Canvas)》에서는 현실에서 사용될 수 있는 실제 코드를 이용하여 2D 그래픽 API에 대해 소개하는 동시에 다양한 운영 체제와 장치에서 실행할 수 있는 웹 애플리케이션을 구현할 때 알아야 할 모든 사항을 다루고 있다.



그뿐만 아니라 도형을 그리고 조작하는 작업, 도형과 텍스트를 그릴 수 있도록 드로잉 표면을 저장하고 복원하는 작업, 텍스트 컨트롤을 구현하는 작업 등과 같이 현실에서 캔버스 API를 사용하는 방법도 간결하고 알기 쉽게 소개하고 있다. 여러분은 이미지를 필터링할 때 웹 워커를 사용하여 애플리케이션에서 즉시 처리하는 방법, 자연스럽게 실행되도록 애니메이션을 구현하는 방법, 시차를 이용하여 배경을 3D처럼 스크롤 하는 방법, 게임 엔진 및 핀볼게임에 대한 코드와 충돌 감지, 물리학, 스프라이트 등을 이용하여 비디오 게임을 구현하는 방법에 대해서도 살펴볼 것이다.



그리고 이 책 마지막 부분에서는 iOS5를 포함한 모바일 장치에서 캔버스를 사용하는 방법과 HTML5 애플리케이션에서 사용할 수 있는 캔버스 기반 컨트롤을 구현하는 방법을 살펴볼 것이다.



이 책에서 다루는 내용

▶ 요소 - 다른 HTML 요소와 함께 요소를 사용하는 방법 및 이벤트를 처리하고, 캔버스를 출력하고, 오프스크린 캔버스를 사용하는 방법.

▶ 도형 - 라인, 호, 원, 곡선, 다각형을 편집하고, 지우고, 드래그하고, 그리는 방법 및 그림자, 그라디언트, 패턴을 사용하는 방법.

▶ 텍스트 - font 속성을 설정하고, 배치하고, 그리는 방법 및 텍스트 컨트롤을 생성하는 방법.

▶ 이미지 - 이미지를 움직이고, 처리하고, 클리핑하고, 확대하고, 그리는 방법.

▶ 애니메이션 - 자연스럽게 재생될 뿐만 아니라 효율적이고 간편한 애니메이션을 생성하는 방법.

▶ 스프라이드 - 페인터와 동작을 가지고 있는 움직이는 오브젝트를 구현하는 방법.

▶ 물리학 - 물적 시스템(낙하하는 물체, 추, 발사체 등)을 구축하는 방법 및 비선형 움직임과 애니메이션을 위한 트위닝을 구현하는 방법.

▶ 충돌 감지 - 충돌 감지와 관련된 고급 기술을 사용하는 방법.

▶ 게임 개발 - 시간 기반 모션 및 하이 스코어 지원 등과 같이 게임 엔진에서 구현하고 있는 게임 개발에 대한 모든 기능을 구현하는 방법.

▶ 사용자 컨트롤 - 사용자 정의 컨트롤을 구현하는 데 필요한 모든 인프라 및 프로그레스 바, 슬라이드, 이미지 패너 등을 구현하는 방법.

▶ 모바일 애플리케이션 - 모바일 화면에 캔버스 애플리케이션을 맞추고, 미디어 쿼리를 사용하고, 터치 이벤트를 처리하고, iOS5의 애플리케이션 아이콘과 비슷한 아이콘을 생성하는 방법.

▶ 01장 캔버스 구성

1.1 요소

1.1.1 요소의 크기와 드로잉 표면의 크기

1.1.2 캔버스 API

1.2 캔버스 콘텍스트

1.2.1 2d 콘텍스트

1.2.2 캔버스 상태 저장 및 복원

1.3 책에서 사용하는 표준 형태

1.4 개발 환경 개요

1.4.1 명세서

1.4.2 브라우저

1.4.3 콘솔 및 디버거

1.4.4 성능

1.5 기본적인 드로잉 작업

1.6 이벤트 처리

1.6.1 마우스 이벤트

1.6.2 키보드 이벤트

1.6.3 터치 이벤트

1.7 드로잉 표면의 저장 및 복원

1.8 캔버스에서 HTML 요소 사용하기

1.8.1 보이지 않는 HTML 요소

1.9 캔버스 출력하기

1.1 오프스크린 캔버스

1.11 간단한 수학 입문

1.11.1 대수 방정식 풀이

1.11.2 삼각법

1.11.3 벡터

1.11.4 측정 단위에서 방정식 산출하기

1.12 결론



▶ 02장 드로잉

2.1 좌표계

2.2 드로잉 모델

2.3 직사각형 그리기

2.4 색상과 투명도

2.5 그라디언트와 패턴

2.5.1 그라디언트

2.5.2 패턴

2.6 그림자 효과

2.6.1 안쪽 그림자

2.7 패스, 윤곽 그리기, 내부 칠하기

2.7.1 패스와 서브패스

2.7.2 컷아웃(cutout)

2.8 선

2.8.1 선의 경계 및 픽셀 경계

2.8.2 격자무늬 그리기

2.8.3 축 그리기

2.8.4 러버 밴드를 이용해 선 그리기

2.8.5 점선 그리기

2.8.6 CanvasRenderingContext2D를 확장해 점선 그리기

2.8.7 lineCap과 lineJoin

2.9 호와 원

2.9.1 arc() 메서드

2.9.2 러버 밴드 원

2.9.3 acrTo() 메서드

2.9.4 다이얼 및 게이지

2.10 베지어 곡선

2.10.1 이차 곡선

2.10.2 다항 곡선

2.11 다각형

2.11.1 다각형 오브젝트

2.12 고급 패스 조작

2.12.1 다각형 드래그하기

2.12.2 베지어 곡선 편집하기

2.12.3 패스를 뷰로 스크롤하기

2.13 변환

2.13.1 이동, 회전, 확대/축소

2.13.2 사용자 정의 변환

2.14 합성

2.14.1 합성 논란

2.15 클리핑 영역

2.15.1 클리핑 영역으로 지우기

2.15.2 클리핑 영역을 이용한 망원경

2.16 결론



▶ 03장 텍스트

3.1 텍스트의 윤곽 그리기 및 내부 칠하기

3.2 font 속성 설정하기

3.3 텍스트 배치하기

3.3.1 가로 및 세로로 배치하기

3.3.2 중앙에 텍스트 배치하기

3.3.3 텍스트 측정하기

3.3.4 축 라벨링

3.3.5 다이얼 라벨링

3.3.6 호 둘레에 텍스트 그리기

3.4 텍스트 컨트롤 구현하기

3.4.1 텍스트 커서

3.4.2 캔버스에서 텍스트 라인 편집하기

3.4.3 단락

3.5 결론



▶ 04장 이미지 및 비디오

4.1 이미지 그리기

4.1.1 캔버스에 이미지 그리기

4.1.2 drawImage() 메서드

4.2 이미지 확대하기

4.2.1 캔버스 경계 밖에 이미지 그리기

4.3 캔버스에 캔버스 그리기

4.4 오프스크린 캔버스

4.5 이미지 조작하기

4.5.1. 이미지 데이터에 접근하기

4.5.2 이미지 데이터 변경하기

4.6 이미지 클리핑

4.7 이미지 움직이기

4.7.1 오프스크린 캔버스를 이용한 애니메이션

4.8 보안

4.9 성능

4.9.1 drawImage(HTMLImage) vs. drawImage(HTMLCanvas) vs. putImageData()

4.9.2 캔버스에 캔버스 그리기 vs. 캔버스에 이미지 그리기; 확대 vs. 원본

4.9.3 반복문을 이용한 이미지 데이터 반복

4.1 돋보기

4.10.1 오프스크린 캔버스 사용하기

4.10.2 파일 시스템에서 이동한 이미지에 접근하기

4.11 비디오 프로세싱

4.11.1 비디오 포맷

4.11.2 캔버스에서 비디오 재생하기

4.11.3 비디오 프로세싱

4.12 결론



▶ 05장 애니메이션

5.1 애니메이션 루프

5.1.1 requestAnimationFrame() 메서드로 브라우저에서 프레임률을 설정하게 하기

5.1.2 인터넷 익스플로러

5.1.3 간편한 애니메이션 루프

5.2 프레임률 계산하기

5.3 대체 프레임률을 이용해 작업 예약하기

5.4 배경 복원하기

5.4.1 클리핑

5.4.2 블리팅

5.5 이중 버퍼링

5.6 시간 기반 모션

5.7 배경 스크롤하기

5.8 시차(視差)

5.9 사용자 동작

5.10 시한 애니메이션

5.10.1 스톱워치

5.10.2 애니메이션 타이머

5.11 애니메이션 모범 사례

5.12 결론



▶ 06장 스프라이트

6.1 스프라이트 개요

6.2 페인터

6.2.1 스트로크 페인터와 필 페인터

6.2.2 이미지 페인터

6.2.3 스프라이트 시트 페인터

6.3 스프라이트 동작

6.3.1 동작 조합하기

6.3.2 시한 동작

6.4 스프라이트 애니메이터

6.5 스프라이트 기반 애니메이션 루프

6.6 결론



▶ 07장 물리학

7.1 중력

7.1.1 낙하

7.1.2 탄도 궤적

7.1.3 진자

7.2 시간 왜곡

7.3 시간-왜곡 함수

7.4 운동 왜곡

7.4.1 등속도 운동

7.4.2 Ease In: 지속적인 가속

7.4.3 Ease Out: 지속적인 감속

7.4.4 Ease In, Ease Out

7.4.5 탄성과 바운싱

7.5 애니메이션 왜곡

7.6 결론



▶ 08장 충돌 감지

8.1 바운싱 영역

8.1.1 직사각형의 경계 영역

8.1.2 원형 경계 영역

8.2 바운싱

8.3 레이 캐스팅

8.3.1 미조정

8.4 SAT 및 MTV

8.4.1 SAT를 이용한 충돌 감지

8.4.2 MTV를 이용해 충돌 처리하기

8.5 결론



▶ 09장 게임 개발

9.1 게임 엔진

9.1.1 게임 루프

9.1.2 이미지 로딩

9.1.3 멀티 트랙 사운드

9.1.4 키보드 이벤트

9.1.5 하이 스코어

9.1.6 게임 엔진 코드

9.2 Ungame

9.2.1 ungame의 HTML

9.2.2 ungame의 게임 루프

9.2.3 ungame 로딩

9.2.4 일시 정지

9.2.5 키 리스너

9.2.6 게임 종료 및 하이 스코어

9.3 핀볼게임

9.3.1 게임 루프

9.3.2 공

9.3.3 중력과 마찰

9.3.4 플리퍼의 움직임

9.3.5 키보드 이벤트 처리하기

9.3.6 충돌 감지

9.4 결론



▶ 10장 사용자 정의 컨트롤

10.1 모서리가 둥근 직사각형

10.2 프로그레스 바

10.3 슬라이더

10.4 이미지 패너

10.5 결론



▶ 11장 모바일

11.1 모바일 뷰 포트

11.1.1 viewport 태그

11.2 미디어 쿼리

11.2.1 미디어 쿼리 및 CSS

11.2.2 자바스크립트를 사용해 미디어 변경 처리하기

11.3 터치 이벤트

11.3.1 터치 이벤트 오브젝트

11.3.2 터치 리스트

11.3.3 터치 오브젝트

11.3.4 터치 이벤트 및 마우스 이벤트 지원

11.3.5 핀치 및 줌

11.4 iOS5

11.4.1 애플리케이션 아이콘 및 시작 이미지

11.4.2 iOS5 애플리케이션 아이콘과 시작 이미지를 위한 미디어 쿼리

11.4.3 브라우저 크롬을 사용하지 않는 전체 화면

11.4.4 애플리케이션 스테이터스 바

11.5 가상 키보드

11.5.1 캔버스 기반 키보드 구현

11.6 결론

데이비드 기어리 저자 데이비드 기어리는 유명한 작가이자 연설가일 뿐만 아니며 자문 위원으로도 활동하고 있다. 데이비드는 1980년대에 C와 스몰토크를 사용해 그래픽 기반 애플리케이션 및 인터페이스를 구현하기 시작했다. 그리고 보잉사(社)에서 8년 동안 C++와 객체 지향 소프트웨어 개발을 가르쳤으며 1994년부터 1997년까지 선 마이크로소프트사(社)에서 소프트웨어 엔지니어로 일했다. 또한, 자바 구성요소 프레임워크에 관한 베스트셀러 두 권을 포함해 자바와 관련된 책 여덟 권을 집필하기도 했다. 데이비드가 집필한 《그래픽 자바 2: 스윙》은 역대 최고의 베스트셀러 스윙 도서이며, 케이 호스트먼과 공동으로 집필한 《코어 자바서버 페이스》도 JSF 관련 베스트셀러 도서다. 데이비드는 수백 개에 달하는 전 세계 학회에 참석하여 강의한 열정적인 연설가로 NFJS(No Fluff Just Stuff) 투어에서 6년 동안 연설했을 뿐만 아니라 120차례가 넘은 학술 토론회에서 강연도 했다. 그리고 JavaOne Rock Star에서도 세 번이나 연설한 경험이 있다. 2011년, 데이비드와 스콧 데이비스는 HTML5 덴버 미트업 그룹(Denver Meetup Group - www.meetup.com/HTML5-Denver-Users-Group)을 공동으로 창립했다. 참고로, 이 책을 출판한 2012년에는 그룹 회원이 500명을 넘었다. 데이비드는 Twitter(davidgeary)로 연락할 수 있으며 이 책에서 소개하는 예제의 코드는 corehtml5canvas에서 확인할 수 있다.