▼ HTML5 코드 연습장: 코드를 수정해서 바로 실행결과를 확인할 수 있다 [열기]
▼ Canvas는?
- Canvas는 HTML에서 엘리먼트(요소)라고 불린다.
- 원리: JavaScript의 캔버스API로 코드를 만들면 Canvas는 프레임마다 비트맵 화면을 다시 그린다.
- Canvas는 즉시모드(imediate mode)를 사용한다. ↔ 보류모드(retained mode): 플래시, 실버라이트, SVG
- JavaScript 코드 충돌에 유의한다 (scope/namespace 이용해서 충돌을 피한다)
1.1 기본적인 HTML 페이지
▼ div & canvas
▼ window
- DOM의 최상위 레벨 객체
- 캔버스 애플리케이션 시작전에 모든 코드와 값이 올라왔는지 확인하는데 사용
- HTML페이지 안의 모든 HTML 태그를 가진다.
- 자바스크립트로 canvas 인스턴스에 접근할때 사용
1.4 자바스크립트와 캔버스
- [도서] 자바스크립트 핵심 가이드(한빛미디어,2008)
- 자바스크립트 프레임워크&라이브러리: jQuery(프), Processing.js(프), Modernize, JSColor, WebGL
▼ 자바스크립트를 넣는 위치
- head에 넣을때는 스크립트 동작전에 HTML페이지가 올라왔는지 확인 필요
- 아니면 </body> 바로 앞에 넣기도 한다.
1.5 HTML5 캔버스로 만드는 "Hello World!"
- 자바스크립트 작성시 변수나 함수명이 HTML 페이지의 다른 JS 코드와 충돌되지 않도록 유의한다.
- 충돌방지를 위해 캡슐화를 사용한다.
방법1) 테스트용캔버스 이용 (출처 - http://diveintohtml5.org)
1.6 Console.log로 디버깅하기
- 이 함수는 자바스크립트 콘솔에 로그 문자 메시지를 남긴다.
- 지원되지 않는 브라우저에서 에러가 나지 않도록 console.log 감싼 코드 ▽아래
- CanvasRenderingContext2D는 캔버스에 그릴 때 필요한 모든 메서드와 속성을 가진다.
- 현재 상태 정보란? 캔버스 전역에 적용되는 그리기 상태를 모아놓은 스택
▼ 상태정보
- 변환행렬: 크기 조절, 회전, 변환, 이동을 위한 메서드
- 자르기 영역: clip() 메서드롤 생성된 영역
- 컨텍스트의 속성: strokeStyle, fillStyle, globalAlpha, globalCompositeOperation, lineWidth, lingCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, font, textAlign, textBaseline
▼ 즉시 모드와 보류 모드
- 즉시 모드(Canvas): 변경이 있을때마다 다시 그린다.
장점: 전역 속성 사용으로 화면 전체에 변경사항 적용하기가 용이
- 보류 모드(플래시, 실버라이트, SVG): 그리기 관련 객체를 저장해 놓고 출력 리스트로 작업
장점: 독립적인 상태 정보를 갖는 여러 객체로 이루어진 애플리케이션 제작에 용이
1.8 HTML 캔버스 객체
- var theCanvas = document.createElement("canvas");
- theCanvas.width = 200; theCanvas.height = 300;
▼ 캔버스 공개 메서드:
- theCanvas.getContext("2d")
- theCanvas.toDataURL(): 지금 그리는 캔버스 객체의 비트맵 이미지의 스트링 정보를 넘긴다.(화면 스냅샷?)
1.9 또 다른 예제: Guess The Letter(문자 맞추기)
▼ 목표: 컴퓨터가 임의로 선택한 알파벳문자를 사용자가 맞추는 게임
▼ 기능: 참가자가 몇 번 추측했는지 기록, 나온 문자(history) 나열, 정답이 추측보다 높은지 낮은 알파벳인지 알려준다.
▼ Step by Step 구현
① 변수 구상하기
② 초기화 함수: initGame()
③ 이벤트 함수: eventKeyPressed() - 게임오버확인 → 나온 문자 저장(history) → 예외처리 → 비교 → 출력
▼ drawScreen()
- 문자배열 출력: variable.toString() - ',' 넣어서 나열
▼ 캔버스에서 이미지로 바꾸기 - toDataURL()
- Canvas는 HTML에서 엘리먼트(요소)라고 불린다.
- 원리: JavaScript의 캔버스API로 코드를 만들면 Canvas는 프레임마다 비트맵 화면을 다시 그린다.
- Canvas는 즉시모드(imediate mode)를 사용한다. ↔ 보류모드(retained mode): 플래시, 실버라이트, SVG
- JavaScript 코드 충돌에 유의한다 (scope/namespace 이용해서 충돌을 피한다)
1.1 기본적인 HTML 페이지
// 브라우저에게 렌더링 타입을 알려준다. <!doctype html> <html lang="ko"> // 영어: en, 일본어: ja <head> // 문자인코딩 방법1.2 사용할 기본적인 HTMLBasic Hello World HTML Page </head> <body> Hello World! </body> </html>
▼ div & canvas
<body>1.3 DOM과 캔버스</body>
▼ window
- DOM의 최상위 레벨 객체
- 캔버스 애플리케이션 시작전에 모든 코드와 값이 올라왔는지 확인하는데 사용
window.addEventListner("load", eventFuncName, false/*하위객체전달여부*/);
▼ document- HTML페이지 안의 모든 HTML 태그를 가진다.
- 자바스크립트로 canvas 인스턴스에 접근할때 사용
var canvas = document.getElementById("canvas");
if( !canvas ) {
return;
}
1.4 자바스크립트와 캔버스
- [도서] 자바스크립트 핵심 가이드(한빛미디어,2008)
- 자바스크립트 프레임워크&라이브러리: jQuery(프), Processing.js(프), Modernize, JSColor, WebGL
▼ 자바스크립트를 넣는 위치
- head에 넣을때는 스크립트 동작전에 HTML페이지가 올라왔는지 확인 필요
- 아니면 </body> 바로 앞에 넣기도 한다.
1.5 HTML5 캔버스로 만드는 "Hello World!"
- 자바스크립트 작성시 변수나 함수명이 HTML 페이지의 다른 JS 코드와 충돌되지 않도록 유의한다.
- 충돌방지를 위해 캡슐화를 사용한다.
function canvasApp() {
drawScreen();
...
function drawScreen() {
...
}
}
▼ Canvas 지원여부 확인법방법1) 테스트용캔버스 이용 (출처 - http://diveintohtml5.org)
funtion canvasSupport() {
return !!document.createElement('testcanvas').getContext;
}
방법2) [추천] modernizr : 웹 기반 기술의 지원여부 확인용 라이브러리
<script src="http://www.modernizr.com/downloads/modernizr-latest.js"></script>
function supportCanvas() {
return Modernizr.canvas;
}
▼ 컨텍스트로 캔버스에 그리기(full source)1.6 Console.log로 디버깅하기
- 이 함수는 자바스크립트 콘솔에 로그 문자 메시지를 남긴다.
- 지원되지 않는 브라우저에서 에러가 나지 않도록 console.log 감싼 코드 ▽아래
var Debugger = function () { };
Debugger.log = function (message) {
try {
console.log(message);
} catch (exception) {
return;
}
}
...
Debugger.log("메시지"); // Usage
1.7 2D 컨텍스트와 현재 상태 정보- CanvasRenderingContext2D는 캔버스에 그릴 때 필요한 모든 메서드와 속성을 가진다.
- 현재 상태 정보란? 캔버스 전역에 적용되는 그리기 상태를 모아놓은 스택
▼ 상태정보
- 변환행렬: 크기 조절, 회전, 변환, 이동을 위한 메서드
- 자르기 영역: clip() 메서드롤 생성된 영역
- 컨텍스트의 속성: strokeStyle, fillStyle, globalAlpha, globalCompositeOperation, lineWidth, lingCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, font, textAlign, textBaseline
▼ 즉시 모드와 보류 모드
- 즉시 모드(Canvas): 변경이 있을때마다 다시 그린다.
장점: 전역 속성 사용으로 화면 전체에 변경사항 적용하기가 용이
- 보류 모드(플래시, 실버라이트, SVG): 그리기 관련 객체를 저장해 놓고 출력 리스트로 작업
장점: 독립적인 상태 정보를 갖는 여러 객체로 이루어진 애플리케이션 제작에 용이
1.8 HTML 캔버스 객체
- var theCanvas = document.createElement("canvas");
- theCanvas.width = 200; theCanvas.height = 300;
▼ 캔버스 공개 메서드:
- theCanvas.getContext("2d")
- theCanvas.toDataURL(): 지금 그리는 캔버스 객체의 비트맵 이미지의 스트링 정보를 넘긴다.(화면 스냅샷?)
1.9 또 다른 예제: Guess The Letter(문자 맞추기)
▼ 목표: 컴퓨터가 임의로 선택한 알파벳문자를 사용자가 맞추는 게임
▼ 기능: 참가자가 몇 번 추측했는지 기록, 나온 문자(history) 나열, 정답이 추측보다 높은지 낮은 알파벳인지 알려준다.
▼ Step by Step 구현
① 변수 구상하기
② 초기화 함수: initGame()
③ 이벤트 함수: eventKeyPressed() - 게임오버확인 → 나온 문자 저장(history) → 예외처리 → 비교 → 출력
▼ drawScreen()
- 문자배열 출력: variable.toString() - ',' 넣어서 나열
▼ 캔버스에서 이미지로 바꾸기 - toDataURL()
...
function createImageDataPressed(e) {
window.open(theCanvas, toDataURL(), "canvasImage", "left=0, top=0, width="
+theCanvas.width + ", height=" + theCanvas.height + ", toolbar=0, resizable=0");
}
...
반응형
'HTML5 Canvas' 카테고리의 다른 글
| CHAR 4. 캔버스에서의 이미지 (0) | 2012.03.01 |
|---|---|
| CHAR 3. HTML5 캔버스 문자 API (6) | 2012.02.29 |
| HTML5 Canvas 관련 사이트 (0) | 2012.02.27 |
| CHAR 2. 캔버스에 그리기 (0) | 2012.02.22 |
| html5canvas 도서 스터디 시작(2/18-3/31) (0) | 2012.02.21 |
