HTML5 캔버스 첫걸음

1장 HTML5 소개
___간추린 HTML의 역사
___HTML5가 필요한 이유
______가려움
______가려운 곳 긁기
___HTML5의 새로운 면
______내용 구조화 엘리먼트
______양식
______미디어 관련 엘리먼트
___HTML5로 만든 견본 웹페이지 뜯어보기
______한 줄씩 코드 분석
___HTML5에 대한 오해
______CSS3에 대한 오해
______웹 폰트에 대한 오해
______위치 정보에 대한 오해
______SVG에 대한 오해
______웹 저장소에 대한 오해
______웹 워커에 대한 오해
______웹 소켓에 대한 오해
___정리
______HTML5 관련 추가 정보

2장 자바스크립트 기초
___자바스크립트 훑어보기
___제이쿼리
______제이쿼리란?
______제이쿼리를 쓰는 이유
______속임수일까?
______자바스크립트를 제대로 이해하지 못했다는 뜻인가?
______제이쿼리를 사용하려면 어떻게 해야 할까?
___HTML 페이지에 자바스크립트 추가
___웹페이지 탑재 후 자바스크립트 실행
______잘못된 방법(window.onload 이벤트 방식)
______어려운 방법(DOM 방식)
______쉬운 방법(제이쿼리 방식)
___변수와 데이터 타입
______변수
______데이터 타입
___제어문
______if문
______비교 연산자
______if문과 복합 조건
______else문과 else if문
___함수
______함수 작성
______함수 호출
___객체
______객체란?
______객체 생성과 사용
___배열
______배열 작성
______배열 접근과 수정
___반복문
___타이머
______일회용 타이머 설정
______일회용 타이머 해제
______반복 타이머 설정
______반복 타이머 해제
___DOM
______HTML 웹페이지 예
______자바스크립트만으로 DOM에 접근하는 방법
______제이쿼리로 DOM에 접근하는 방법
______DOM 조작
___정리

3장 캔버스 기초 학습
___canvas 엘리먼트와 친해지기
______캔버스를 지원하는 브라우저
___2차원 렌더링 컨텍스트
______좌표계
______2차원 렌더링 컨텍스트에 접근
___간단한 도형과 선 그리기
______선
______원
___스타일
______선의 두께 바꾸기
___텍스트 그리기
___캔버스를 지우기
______너비/높이 기교
___캔버스로 브라우저 창 채우기
___정리

4장 캔버스 심화 학습
___그리기 상태 저장과 복원
______캔버스의 그리기 상태란?
______그리기 상태 저장
______그리기 상태 복원
______여러 그리기 상태 저장과 복원
___변환
______이동
______크기 조절
______회전
______변환 행렬
___합성
______전역 투명도
______합성 연산
___그림자
___그레이디언트
___복합 경로
______베지어 곡선
___이미지 파일로 캔버스 내보내기
___정리

5장 이미지와 동영상 조작
___캔버스에 이미지 탑재
___이미지 크기 조절과 자르기
______이미지 크기 조절
______이미지 자르기
______그림자
___이미지 변환
______이동
______회전
______크기 조절하며 뒤집기
___픽셀 값에 접근
______보안 문제
___처음부터 이미지 만들기
______픽셀 색상 무작위로 설정
______모자이크 효과
___이미지에 기본 효과 적용
______색상 반전
______회색조
______픽셀 처리
___동영상 조작
______HTML5의 video 엘리먼트 생성
______HTML5 동영상 API에 접근
______캔버스 설정
___정리

6장 사물 움직이기
___캔버스에서의 애니메이션
___애니메이션 루프 작성
______애니메이션 루프
______수정하고, 지우고, 그리기
___그릴 도형 기억
______잘못된 방법
______올바른 방식
______도형을 무작위로 만들기
___방향 전환
___원을 따라 움직이기
______삼각법
______모든 것을 한 자리에 놓기
___경계선에서 객체 튕기기
___정리

7장 향상된 애니메이션 구현
___물리학 개론
______물리학이란?
______이미지를 처리하는 데 도움이 되는 이유
______기본 용어
______뉴턴의 운동 법칙
___물리학을 이용한 애니메이션
______사전 준비
______속도
______경계선 추가
______가속도
______마찰력
___충돌 처리
______충돌 검출
______서로 부딪힌 객체끼리 튕겨내기
______운동량 보존
___정리

8장 우주 볼링 게임 제작
___게임 개요
______요구 사항
___핵심 기능 설정
______HTML 표시
______멋지게 만들기
______자바스크립트 설정
___사용자 인터페이스 활성화
___게임 객체 생성
______기지 생성
______소행성 설정
______플레이어의 소행성 설정
______UI 갱신
___사물 움직이기
___사용자 상호 작용의 검출
______모두 설정
______플레이어 소행성 선택
______추진력 증가
______놓아주기
______사용자 입력 시각화
___플레이어 재설정
___플레이어가 이기게 하기
______점수 갱신
______플랫폼에서 소행성 제거
___정리

9장 소행성 회피 게임 시작
___게임 개요
______요구 사항
___핵심 기능 설정
______HTML 표시
______멋지게 만들기
______자바스크립트 설정
___게임 객체 생성
______소행성 설정
______플레이어의 로켓 설정
___키보드 입력 감지
______키 코드
______키보드 이벤트
___사물 움직이기
___횡스크롤 효과 꾸미기
______소행성 재활용
______경계 추가
______로켓이 계속 이동하게 하기
___소리 추가
___게임 마무리
______점수 매기기
______로켓 파괴
___난이도 높이기
___정리

10장 캔버스의 미래
___캔버스와 SVG
______접근성
______비트맵과 벡터
___캔버스와 플래시
______자바스크립트 개발자는 플래시 개발자에게 배울 수 있다
______플래시처럼 사용자 친화적인 편집기가 캔버스에는 없다
___캔버스와 성능
______성능 시험
___캔버스 게임 라이브러리와 애니메이션 라이브러리
___삼차원 세계
___주변 기기와 통합
______무지개 프로젝트
___웹 소켓으로 멀티플레이 구현
___영감을 주는 게임
______스케치 아웃(Sketch Out)
______Z-타입
______꼬불이(Sinous)
___정리