• HTML5 캔버스 완벽 가이드
  • 그래픽, 애니메이션, 게임 개발을 위한 캔버스 API의 모든 것

  • 데이비드 기어리 지음
  • 김민섭 옮김

  • 오픈소스 & 웹 시리즈 _ 045
  • ISBN: 9788998139070
  • 40,000원 | 2012년 12월 13일 발행 | 716쪽



HTML5 캔버스 개발의 모든 것!

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

책의 전반부에서는 도형 및 텍스트를 캔버스에 그리는 방법과 이미지를 조작하고 그리는 방법을 소개하는 캔버스 API를 다룬다. 후반부에서는 캔버스 API를 사용해 애니메이션과 움직이는 스프라이트를 구현하고 시뮬레이션 생성, 충돌 감지, 비디오 게임을 개발하는 방법을 소개한다. 또한 모바일에서도 실행할 수 있는 실제 애플리케이션을 구현할 수 있도록 사용자 정의 컨트롤을 구현하는 방법과 캔버스 기반 모바일 애플리케이션을 제작하는 방법도 다룬다.

HTML5 캔버스를 이용하면 플래시와 같은 플러그인을 설치하지 않고도 웹에서 작동하는 게임을 개발할 수 있다. 이 책에서는 캔버스 API뿐 아니라 게임 개발에 필요한 수학/물리 관련 기초 지식(삼각함수, 중력, 가속도, 충돌 처리)까지 자세히 설명한다. 이 책의 예제 사이트 (http://wikibook.github.io/html5canvas/)에서 각 예제를 직접 실습해 볼 수 있으며, 이미지 조작, 애니메이션, 충돌 감지, 게임, 모바일 등 전 분야에 걸친 다양하고 풍부한 예제를 다루고 있어 캔버스 개발에 막 입문한 초보자부터 게임 개발에 캔버스를 사용하려는 개발자까지 모두 이 책을 활용할 수 있다.

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

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

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

이 책에서 다루는 내용은 다음과 같다.

  • <canvas> 요소 – 다른 HTML 요소와 함께 <canvas> 요소를 사용하는 방법 및 이벤트를 처리하고, 캔버스를 출력하고, 오프스크린 캔버스를 사용하는 방법.
  • 도형 – 라인, 호, 원, 곡선, 다각형을 편집하고, 지우고, 드래그하고, 그리는 방법 및 그림자, 그라디언트, 패턴을 사용하는 방법.
  • 텍스트 – font 속성을 설정하고, 배치하고, 그리는 방법 및 텍스트 컨트롤을 생성하는 방법.
  • 이미지 – 이미지를 움직이고, 처리하고, 클리핑하고, 확대하고, 그리는 방법.
  • 애니메이션 – 자연스럽게 재생될 뿐만 아니라 효율적이고 간편한 애니메이션을 생성하는 방법.
  • 스프라이드 – 페인터와 동작을 가지고 있는 움직이는 오브젝트를 구현하는 방법.
  • 물리학 – 물적 시스템(낙하하는 물체, 추, 발사체 등)을 구축하는 방법 및 비선형 움직임과 애니메이션을 위한 트위닝을 구현하는 방법.
  • 충돌 감지 – 충돌 감지와 관련된 고급 기술을 사용하는 방법.
  • 게임 개발 – 시간 기반 모션 및 하이 스코어 지원 등과 같이 게임 엔진에서 구현하고 있는 게임 개발에 대한 모든 기능을 구현하는 방법.
  • 사용자 컨트롤 – 사용자 정의 컨트롤을 구현하는 데 필요한 모든 인프라 및 프로그레스 바, 슬라이드, 이미지 패너 등을 구현하는 방법.
  • 모바일 애플리케이션 – 모바일 화면에 캔버스 애플리케이션을 맞추고, 미디어 쿼리를 사용하고, 터치 이벤트를 처리하고, iOS5의 애플리케이션 아이콘과 비슷한 아이콘을 생성하는 방법.

데이비드 기어 (David Geary)

데이비드 기어리는 유명한 작가이자 연설가일 뿐만 아니며 자문 위원으로도 활동하고 있다. 데이비드는 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)로 연락할 수 있으며 이 책에서 소개하는 예제의 코드는 http://corehtml5canvas.com에서 확인할 수 있다.

김민섭

동국대학교 컴퓨터 공학과를 졸업하였으며, 벤처기업에서 번역과 엔지니어로 근무하였다. 현재는 번역에이전시 엔터스코리아에서 컴퓨터와 IT 전문 번역가로 활동하고 있다.

주요 역서로는『아이패드 퍼펙트 매뉴얼 : 친절하고 꼼꼼한 사용설명서』,『CSS 원리와 이용방법』,『월드 오브 워크래프트 1』,『Microsoft XNA 게임 스튜디오 3.0 unleashed』,『미래코드, 클라우드 컴퓨팅』,『월드 오브 워크래프트 2』,『헬로, 풋볼 : 축구의 모든 것』,『축구의 메시아 메시 : 펠레와 마라도나를 뛰어넘는 축구 영웅』,『미래코드, 클라우드 컴퓨팅』등 다수가 있다.

  • 01장_jQuery 시작하기
    • jQuery란 무엇인가
    • jQuery, 왜 좋은가
    • 첫 번째 jQuery 도큐먼트
      • jQuery 내려받기
      • HTML 도큐먼트에서의 jQuery 설정
      • jQuery 코드 작성
      • 완성된 산출물
    • 일반 자바스크립트 vs. jQuery
    • 개발도구
      • 파이어버그
    • 요약
    •  
  • 02장_요소 선택
    • DOM
    • $() 함수
    • CSS 선택자
      • 리스트 항목 레벨 단위로 스타일 입히기
      • 속성 선택자
      • 링크에 스타일 입히기
    • 사용자 정의 선택자
      • 행에 징검다리 스타일 입히기
      • 폼 선택자
    • DOM 순회 메서드
      • 특정 셀에 스타일 입히기
      • 체인
    • DOM 요소 접근하기
    • 요약
      • 추가 참고 자료
    • 실습 문제
    •  
  • 03장_이벤트 처리
    • 페이지 로드 시점에 작업 수행하기
      • 코드 실행 시간
      • 한 페이지에 여러 스크립트 사용하기
      • 간결하게 단축한 코드
      • .ready() 콜백함수에 인자 넘기기
    • 기본 이벤트
      • 간단한 스타일 변환기
      • 다른 버튼 활성화하기
      • 이벤트 핸들러 컨텍스트
      • 좀 더 간소화하기
      • 간소화된 이벤트
    • 합성 이벤트
      • 고급기능 보이기와 숨기기
      • 클릭할 수 있는 아이템 강조하기
    • 이벤트의 여행
      • 이벤트 버블링의 부작용
    • 진행 경로 수정하기 : 이벤트 객체
      • 이벤트 대상
      • 이벤트 전파 멈추기
      • 기본 동작
      • 이벤트 위임
      • 이벤트 위임을 위한 메서드
    • 이벤트 핸들러 제거하기
      • 이벤트 네임스페이스
      • 이벤트 다시 바인딩하기
    • 사용자 상호작용 흉내 내기
      • 키보드 이벤트
    • 요약
      • 추가 참고 자료
    • 실습 문제
    •  
  • 04장_스타일과 애니메이션
    • 인라인 CSS 변경
    • 기본적인 숨기기와 보이기
    • 효과와 속도
      • 속도 지정하기
      • 페이드인과 페이드아웃
      • 슬라이드 업과 슬라이드 다운
      • 복합 효과
    • 사용자 정의 애니메이션 만들기
      • 효과 직접 만들기
      • 여러 프로퍼티를 한번에 애니메이션하기
    • 동시효과 대 연속효과
      • 요소들의 단일 집합에 적용하기
      • 요소들의 다중 집합에 효과 적용하기
      • 핵심정리
    • 요약
      • 추가 참고 자료
    • 실습 문제
    •  
  • 05장_DOM 다루기
    • 속성 조작하기
      • class 이외의 속성
      • DOM 요소 프로퍼티
    • DOM 트리 다루기
      • $() 함수 다시 보기
      • 새로운 요소 생성하기
      • 새로운 요소 삽입하기
      • 요소 이동
      • 요소 감싸기
      • 순서가 뒤바뀐 역 삽입 메서드
    • 요소 복사하기
      • 인용구문 복제하기
    • 콘텐츠를 가져오고 설정하는 메서드
      • 추가 스타일 조정
    • DOM 조작 메서드 핵심정리
    • 요약
      • 추가 참고 자료
    • 실습 문제
    •  
  • 06장_Ajax를 이용한 데이터 전송
    • 필요할 때 데이터 로드하기
      • HTML 추가하기
      • 자바스크립트 객체로 작업하기
      • XML 도큐먼트 로드하기
    • 데이터 형식 선택하기
    • 서버로 데이터 전달하기
      • GET 요청 수행하기
      • POST 요청 수행하기
      • 폼 데이터 전송하기
    • Ajax 요청에 대한 서로 다른 콘텐츠의 전송
    • 요청이 처리 중임을 표시하기
    • 에러 처리
    • Ajax와 이벤트
    • 보안 제약사항
      • 원격 데이터를 위한 JSONP
    • 추가 옵션
      • 낮은 수준의 Ajax 메서드
      • 기본 옵션 변경하기
      • HTML 페이지의 일부 로드하기
    • 요약
      • 추가 참고 자료
    • 실습 문제
    •  
  • 07장_플러그인
    • 플러그인과 사용법 찾기
    • 플러그인 사용법
      • Cycle 플러그인 내려받기와 참조하기
      • 간단한 플러그인 사용
      • 플러그인 메서드의 인자 전달하기
      • 기본 인자 값
      • 다른 유형의 플러그인
    • jQuery UI 플러그인 라이브러리
      • 효과
      • 상호작용 컴포넌트
      • 위젯
      • jQuery UI 테마롤러
    • 요약
    • 실습 문제
    •  
  • 08장_플러그인 개발
    • 플러그인에서 $ 별칭 사용
    • 새 전역함수 추가
      • 여러 함수 추가하기
    • jQuery 객체 메서드 추가
      • 객체 메서드 컨텍스트
      • 묵시적 반복
      • 메서드 체인
    • 메서드 파라미터
      • 파라미터 맵
      • 기본 파라미터 값
      • 콜백 함수
      • 커스터마이즈 할 수 있는 기본값
    • jQuery UI 위젯 팩토리
      • 위젯 만들기
      • 위젯 제거하기
      • 위젯의 활성화와 비활성화
      • 위젯의 옵션 지원하기
      • 서브 메서드 추가하기
      • 위젯 이벤트 발생시키기
    • 플러그인 디자인을 위한 추천사항
      • 플러그인 배포하기
    • 요약
    • 실습 문제
    •  
  • 09장_고급 선택자와 순회
    •  
    • 선택과 순회 다시 보기
      • 동적 테이블 필터링
      • 테이블 행 줄무늬
      • 필터과 줄무늬의 조합
      • 기타 선택자와 순회 메서드
    • 선택자의 커스터마이징과 최적화
      • 사용자 정의 선택자 플러그인 작성하기
      • 선택자 성능
    • DOM 순회 깊이 들여다보기
      • jQuery 객체 프로퍼티
      • DOM 요소 스택
      • DOM 순회 메서드 플러그인 작성하기
      • DOM 순회 성능
    • 요약
      • 추가 참고 자료
    • 실습 문제
    •  
  • 10장_고급 선택자와 순회
    • 이벤트 다시 보기
      • 추가 데이터 페이지 로드하기
      • 마우스 오버 시 데이터 표시하기
    • 이벤트 위임
      • jQuery 위임 메서드 사용하기
      • 위임 메서드 선택하기
      • 조기 위임
      • 컨텍스트 인자 사용하기
    • 사용자 정의 이벤트
      • 무한 스크롤링
      • 사용자 정의 이벤트 파라미터
    • 이벤트 발생 빈도 조절
      • 빈도조절을 수행하는 다른 방법
    • 특수 이벤트
      • 특수 이벤트에 대한 추가 정보
    • 요약
      • 추가 참고 자료
    • 실습 문제
    •  
  • 11장_고급 효과
    • 애니메이션 다시 보기
    • 애니메이션 관찰하기 및 중단하기
      • 애니메이션 상태 결정하기
      • 실행 중인 애니메이션 중단하기
    • 전역 효과 프로퍼티
      • 모든 효과 중단하기
      • 애니메이션의 부드러운 정도를 미세 조정하기
      • 효과의 지속시간 정의
    • 다중 프로퍼티 이징
    • 지연 객체
      • 애니메이션의 약속 객체
    • 요약
      • 추가 참고 자료
    • 실습 문제
    •  
  • 12장_고급 DOM 다루기
    • 테이블 행의 정렬
      • 서버에서 정렬
      • Ajax 정렬
      • 자바스크립트 정렬
    • 요소의 이동과 삽입 다시보기
      • 기존 텍스트에 링크 추가하기
      • 간단한 자바스크립트 배열의 정렬
      • DOM 요소 정렬
    • DOM 요소와 함께 데이터 저장하기
      • 추가적 사전 계산의 수행
      • 비 문자열 데이터 저장하기
      • 정렬 방향 바꾸기
    • HTML5 커스텀 데이터 속성 사용하기
    • JSON을 이용한 테이블 행의 생성 및 정렬
      • JSON 객체 수정하기
      • 필요에 따라 콘텐츠 재구성하기
    • 고급 속성 다루기
      • 간소화된 요소 생성
      • DOM 조작 후크
    • 요약
      • 추가 참고 자료
    • 실습 문제
    •  
  • 13장_고급 Ajax
    • Ajax를 이용한 단계적 기능향상
      • JSONP 데이터 이용하기
    • Ajax 에러 처리
    • jqXHR 객체
      • Ajax 약속 객체
      • 응답 저장하기
    • 스로틀링 Ajax 요청
    • Ajax 기능 확장
      • 데이터 유형 변환기
      • Ajax 프리필터
      • 대체 트랜스포트
    • 요약
      • 추가 참고 자료
    • 실습 문제
    •  
  • 부록A_자바스크립트 클로저
    • 내부 함수
      • 영역 벗어나기
      • 변수 범위
    • 클로저 사이의 상호작용
    • jQuery에서의 클로저
      • $(document).ready()로 인자 전달하기
      • 이벤트 핸들러
      • 반복문에서 핸들러 연결하기
      • 기명함수와 익명함수
    • 메모리 누수 위험
      • 우연한 순환 참조들
      • 인터넷 익스플로러 메모리 누수 문제
    • 요약
    •  
  • 부록B_QUnit으로 자바스크립트 테스트하기
    • QUnit 내려받기
    • 문서 설정하기
    • 테스트 구성하기
    • 테스트 추가하기와 실행하기
      • 비동기 테스트
    • 다른 유형의 테스트
    • 실제적 고려사항
      • 추가 참고 자료
    • 요약
    •  
  • 부록C_퀵 레퍼런스
    • 선택자 표현식
      • 간단한 CSS
      • 형제 요소들 사이의 위치
      • 매치된 요소들 사이의 위치
      • 속성
      • 그밖의 사용자 정의 선택자
    • DOM 순회 메서드들
      • 필터링
      • 자손
      • 형제
      • 조상
      • 컬렉션 다루기
      • 선택된 요소들에 대한 작업
    • 이벤트 메서드
      • 이벤트 등록
      • 약칭 이벤트 등록
      • 특별 약칭
      • 이벤트 발생
      • 약칭 이벤트 발생
      • 유틸리티
    • 효과 메서드
      • 사전 정의 효과
      • 사용자 정의 애니메이션
      • 큐 조작
    • DOM 조작 메서드
      • 속성과 프로퍼티
      • 콘텐트
      • CSS
      • 크기
      • 삽입
      • 대체
      • 삭제
      • 복사
      • 데이터
    • Ajax 메서드
      • 요청 보내기
      • 요청 모니터링
      • 구성
      • 유틸리티
    • 지연 객체
      • 객체 생성
      • 지연 객체 메서드
      • 약속 객체의 메서드
    • 기타 프로퍼티와 함수
      • jQuery 객체의 프로퍼티
      • 배열과 객체
      • 객체 introspection
      • 기타
    •  
  • 부록D_jQuery 1.7
    • 새로운 이벤트 API : .on()과 .off()
    • 위임된 이벤트의 성능 향상
    • 인터넷 익스플로러 6/7/8에서 HTML5에 대한 지원 향상
    • 토글 애니메이션의 직관적 작동
    • 비동기 모듈 정의 지원
    • 지연객체 확장
    • jQuery.isNumeric() 메서드 지원
    • event.layerX와 event.layerY프로퍼티 제거
    • jQuery.event.proxy() 제거
    • jQuery 1.7 API 추가 및 변경내용
      • 카테고리 : 콜백 객체
      • 카테고리 : 지연객체
      • 카테고리 : 이벤트객체
      • 카테고리 : 필터링
      • 카테고리 : 유틸리티
      • 카테고리 : 이벤트 핸들러 등록
      • 카테고리 : 속성
      • 카테고리 : 데이터
      • 카테고리 : 사용자 정의
      • 토글 애니메이션
      • 기타 변경 사항
  • xii쪽, 10장 제목

    고급 선택자와 순회 --> 고급 이벤트

  • p.54, 목록_3.3 예제 7번째줄

    .button --> button

  • p.70, 두번째 문단 3째줄 selector 에서 . 삭제 해야함

    $(event.target).is('.button') ---> $(event.target).is('button')

  • p.116, 코드 중간에서

    <ahref="http: --> <a href="http:

  • p.261, 10장 제목

    고급 선택자와 순회 --> 고급 이벤트

  • p.323, 4.11.2 예제

    video.onload = function (e) {

    video.play();
    
    window.requestNextAnimationFrame(animate);
    

    };

    ->

    video.addEventListener('loadeddata', function() {

    video.play();
    
    window.requestNextAnimationFrame(animate);
    

    }, false);

예제코드 관련 GitHub 페이지

예제 사이트

도서 소개자료

관련 글