interactive
HTML5 Canvas 소개 본문
1. HTML5 Canvas 소개
canvas : 자바스크립트로 처리할 수 있는 즉시모드 비트맵 영역.
*즉시모드(immediate mode) : 캔버스가가 화면 위에 픽셀을 그리는 한가지 방법이다.
코드로 비트맵 화면을 바로 그린다는 의미에서 즉시모드라고 한다.
이미 구현된 객체를 이용하는게 아니라, 코드로 필요한 객체를 생성하고나서 변경 할 수 있다는 의미.
2. HTML5 doctype
<!doctype html> 태그는 웹 브라우저가 페이지를 표준모드로 랜더링하도록 지정한다.
W3C의 HTML5 명세서를보면 HTML5 문서에는 반드시 <!doctype html> 태그를 표기해야한다.
같은 HTML 문서를 두고 브라우저마다 제멋대로 랜더링하는 문제를 피하기 위해 <!doctype html> 태그를 쓰는것이다.
이 태그는 반드시 HTML 문서의 제일 첫 줄에 있어야 한다.
3. Canvas 요소
<canvas id="canvasOne" width="500" height="300">
Your browser does not support HTML5 canvas.
</canvas>
<canvas> 태그는 세개의 주요한 특성이 있다.
ID : 자바스크립트 코드에서 해당 <canvas> 태그를 참조할때 사용하는 이름이다. 예제에서는 canvasOne을 사용했다.
width : 캔버스의 폭이며 단위는 픽셀이다. 예제에서는 500픽셀이다.
height : 캔버스의 높이이면 단위는 픽셀이다. 예제에서는 300픽셀이다.
*canvas를 포함한 HTML5 요소에는 tabindex, title, class, accesskey, dir, draggable, hidden 등 많은 특성이 있다.
4. Canvas context 캔버스 컨텍스트
캔버스 컨텍스트는 웹브라우저가 캔버스를 지원하려고 지정해 놓은 그리기 영역이다.
캔버스 컨텍스트가 없다는 말은 브라우저가 캔버스를 지원하지 않는다는 뜻이다.
'Design' 카테고리의 다른 글
| [CSS3] background-size 속성알아보기 (0) | 2012.11.14 |
|---|---|
| HTML5 Canvas 기본형태 (0) | 2012.10.31 |
| HTML5로 레이아웃 제작하기 (0) | 2012.09.07 |
| HTML5 DTD설정하기 (0) | 2012.09.05 |
| [HTML5] 사이트로 제작한 사이트들 (0) | 2012.08.27 |
