목차
1장. 캔버스 구성 (click!)
1.1 [canvas] 요소
_1.1.1 [canvas] 요소의 크기와 드로잉 표면의 크기
_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 결론
2장. 드로잉 (click!)
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 결론
3장. 텍스트 (click!)
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 결론
4장. 이미지 및 비디오 (click!)
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 결론
5장. 애니메이션 (click!)
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 결론
6장. 스프라이트 (click!)
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 결론
7장. 물리학 (click!)
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 결론
8장. 충돌 감지 (click!)
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 결론
9장. 게임 개발 (click!)
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장. 사용자 정의 컨트롤 (click!)
10.1 모서리가 둥근 직사각형
10.2 프로그레스 바
10.3 슬라이더
10.4 이미지 패너
10.5 결론
11장. 모바일 (click!)
11.1 모바일 뷰 포트
_11.1.1 viewport [meta] 태그
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 결론