html5 캔버스 완전정복

제 1 장.캔버스

canvastest	캔버스 엘리먼트 배치 및 사용
canvasexample	캔버스 예제의 기본 포맷
drawrect	사각형 그리기
drawline	직선 그리기
drawline2	직선 그리기 함수 정의
drawline3	프로토타입에 그리기 메서드 추가
polyline	두개의 선분 그리기
closepath	폐곡선 그리기
polygon	폐곡선 채우기
pathrect	패스로 사각형 그리기
pathtworect	분리된 두개의 사각형
twopath	두 개의 패스
drawarc	원호 그리기
drawarc2	연결된 원호
drawpie	파이, 부채꼴 그리기
drawcircle	원 그리기
arcfunc	원 메서드 정의
arcto	arcto 메서드
roundarc	모서리 둥글게 그리기
roundrect	모서리가 둥근 사각형
triangle	모서리가 둥근 삼각형
curve	2차 곡선
bezier	3차 곡선

제 2 장.텍스트

colorstyle	색상 스타일
colorstyle2	외곽선 그린 후 채우기
statemachine	속성 상태 머신
rgba	반투명색 사용
globalalpha	globalalpha 속성
lineargradient	직선 그래디언트
lineargradient2	노랑, 빨강 직선 그래디언트
lineargradient3	수직, 우하향 무늬
rainbow	무지개색 채색
lineargradient4	중심점 위치 지정
lineargradient5	채색 영역 바깥의 시작점
radialgradient	원형 그래디언트
radialgradient2	중심을 약간 위로 이동하기
radialgradient3	중심과 바깥원 이동하기
radialgradient4	안쪽 원을 크게 지정하기
linewidth	선의 모양
linecap	선 끝부분의 모양
linejoin	선이 만나는 부분의 모양
shadow	그림자
shadow2	흐릿한 그림자
composite	조합 모드
saverestore	속성의 저장 및 복구
saverestore2	여러 단계의 속성 저장
filltext	텍스트 출력
filltext2	출력 최대폭 지정
fillstyle	폰트 색상 변경
fillstyle2	폰트 아래쪽에 그림자 깔기
gradienttext	무지개색 폰트
textalign	문자열 수평 정렬
textbaseline	문자열 수직 정렬
centertext	캔버스 중앙에 문자열 출력
measuretext	문자열 크기 측정

제 3 장.이미지

drawimage	이미지 출력
drawimage2	이미지 축소 출력
drawimage3	종횡비 유지하지 않고 출력하기
drawimage4	이미지의 일부만 확대해서 출력
drawpng	투명한 이미지 출력
drawpng2	투명하지 않은 이미지 출력
drawalpha	반투명 이미지 출력
imageshadow	이미지 아래쪽에 그림자 깔기
imagecomposite	이미지에 조합 모드 적용하기
imageload	2개의 이미지 읽어서 출력
imageload2	이미지 로드 완료를 대기하는 방법
imageload3	이미지를 숨겨 놓고 읽어와 사용하기
offcanvas	캔버스끼리 이미지 복사하기
offcanvas2	캔버스에 미리 그린 후 전송하기
offcanvas3	같은 캔버스에서 이미지 복사
imagepattern	이미지 패턴 생성 및 적용
imagepattern2	글자의 획에 이미지 패턴 적용
imagepattern3	글자의 외곽선에 이미지 패턴 적용
imagepattern4	그래디언트 패턴 만들어서 반복
revert	이미지 반전
revert2	이미지의 일부만 반전
grayscale	이미지의 색상을 제거하여 그레이스케일화
monoimage	이미지 흑백화
randompixel	무작위 색으로 점찍기
dataurl	캔버스를 문자열로 변환하여 다시 출력
canvastoimage	캔버스를 별도의 창으로 열기
tank	탱크 스프라이트
clipping	패스로 클리핑 영역 설정
clipping2	분리된 영역을 클리핑하기
clipping3	문자열 클리핑하기
clipping4	클리핑 상태 해제

제 4 장.변환과 이벤트

translate	이동 변환
translate2	이동 변환으로 일정 간격의 도형 배치
translate3	캔버스 중앙에 그리기
scale	확대 변환
transorder	변환의 순서 연구
mirroring	이미지 대칭
rotate	회전 변환
rotate2	이미지 회전하여 출력하기
rotatecenter	중심 회전 함수
matrix	행렬 변환
matrix2	행렬을 이용한 복합 변환
matrix3	변환의 순서를 반대로 하기
skew	기울이기 변환
keydown	키보드 이벤트를 받아 원 이동시키기
keypress	동시키입력 받기
mousedown	마우스 이벤트를 받아 원 이동시키기
mousedown2	클릭 위치에 원의 중심 맞추기
canvassize	캔버스의 크기 연구
canvassize2	캔버스 크기와 그리기 표면의 불일치
canvassize3	캔버스의 크기 생략
canvassize4	종횡비 불일치 캔버스
canvaspos	축소된 캔버스에서 이벤트 좌표 구하기
canvaspos2	비율 계산
canvaspos3	외곽선을 넣을 경우
canvaspos4	오프셋 속성 사용
ispoint	패스의 안쪽인지 조사하는 히트 테스트
fillmode	채우기 모드
fillmode2	방향에 따른 채우기 모드

제 5 장.캔버스 실습

freeline	마우스를 이용한 자유곡선 그리기
drawlines	직선 그리기
drawlines2	백업을 하지 않을 때의 문제점
drawrects	사각형 그리기
anim	타이머로 사각형 이동하기
anim2	익명 함수 사용
anim3	시간을 기준으로 일정한 속도 구현
reflectball	반사되는 공 애니메이션
timebaseball	시간 기반 애니메이션
multiball	여러 개의 공을 움직이는 애니메이션
space	운석 피하기 게임

 

 

 

 

 

출처 : http://www.soen.kr/