01. HTML5 Canvas 이해...
HTML5 특성
html5는 자바스크립트로 처리할 수 있는 즉시모드 비트맵 영역이다. 즉시모드란 캔버스가 화면 위에 픽셀을 그리는 한 가지 방법이다. 이 점이 바로 html5 캔버스 보류 모드를 쓰는 플래시, 실버라이트, SVG와 확연히 다른 부분이다.
보류 모드에서는 화면에 그릴 오브젝트의 리스트들이 그래픽 렌더러에 있으며, 코드 내에서 지정한 오브젝트의 특성에 따라 오브젝트를 화면에 그린다. 이 방법에서는 프로그래머가 로우레벨의 연산 작업을 하지 않아도 되지만, 반면에 비트맵 화면의 최종 렌더링을 마음대로 조절하기가 힘들다.
html5 캔버스를 지원하는 브라우저 - IE9 이상, 크롬, 사파리, 파이어폭스, 오페라 등이 있다.
브라우저가 캔버스 기능을 지원하는지 알아보는 데 modernizr.js 자바스크립트 라이브러리를 사용해서 확인 가능하다.
참고로 구글 크롬 프레임으로 IE에서 캔버스를 사용할 수 있다 (http://code.google.com/chrome/chromeframe/).
html5 세션 표준 기본 구성
기존 html 세션 구성 : <html>, <head>, <body>
html5에 세로 추가된 세션 구성 : <nav>, <article>, <header>, <footer>
기본 HTML 구성
- 기본 html 페이지
<!doctype html> <!-- 웹 브라우저가 페이지를 표준모드로 렌더링하도록 지정. -->
<html lang="ko"> <!-- 언어를 정의 -->
<head>
<meta charset="UTF-8"> <!-- 인코딩 문자 지정 -->
<title>Hello World HTML5</title>
</head>
<body>
Hello World!
</body>
</html>
- div 와 css 사용 예제
<div style="position: absolute; top:50px; left: 50px;">Hello World!</div>
- canvas 사용예제
<canvas> 태그는 절대 위치를 지정하는 데 쓰는 <div> 태그와 함께 사용하는 것이 여러모로 도움이 된다.
<div> 태그 안에 <canvas>를 두면 캔버스에 표시할 마우스 포인터의 상대적인 위치와 같은 정보를 얻는데 용이함.
DOM과 캔버스
DOM( 문서 객체 모델 )에서는 HTML 페이지를 객체로 표현한다. DOM을 사용하면 개발언나 플랫폼에 상관없이
웹 브라우저가 페이지를 렌더링한 후에도 내용이나 스타일을 동적으로 변경할 수 있다.
<canvas> 요소 자체는 캔버스 2D 컨텍스트를 이용하여 브라우저에서 DOM으로 접근할 수 있지만,
캔버스 위에 만들어진 그래픽 요소는 DOM 객체로 접근할 수 없다. 캔버스는 그림 객체를 가지고 있는 게 아니라
오직 개별 프레임에 무엇을 그릴지에 대한 정보만 가지고 즉시 모드로 그림을 그리기 때문이다.
캔버스를 위한 자바스크립트 코드 캡슐화하기
자바스크립트는 HTML 페이지 안에서 동작하므로 때로는 다른 자바스크립트 애플리케이션이나 코드와 같이 실행되기다 한다.
보통은 같이 실행되어도 문제를 일으키지 않지만, 변수나 함수가 HTML 페이지 안의 다른 자바스크립트와 서로 충돌할 수 있기
때문에 조심해야 한다.
캔버스 애플리캐이션은 웹 브라우저에서 돌아가는 다른 애플리케이션과 조금 다른다. 캔버스는 정해진 영역에서만 화면을
출력하기 때문에 기능이 매우 독립적이고 페이지의 나머지 부분과 서로 간섭할 여지가 별로 없다. 하지만 한 페이지 안에
캔버스 애플리케이션을 여러 개 넣고 싶다면 자바스크립트 코드를 잘 분리해서 작성해야 한다.
변수와 함수를 또 다른 함수 안에 넣어 캡슐화해서 충돌을 피할 수 있다. 자바스크립트의 함수는 그 자체가 객체이며,
객체는 속성과 메서드를 갖는다. 따라서 함수 하나를 다른 함수 안에 넣어서 그 함수가 다른 함수의 로컬 영역에 들어가게 되면
충돌 문제를 해결할 수 있다.
- 함수 캡슐화 예제
<script type="text/javascript">
window.addEventListener("load", canvasApp, false );
function canvasApp()
{
drawScreen();
function drawScreen()
{
alert("Hello World!");
}
}
</script>
브라우저 캔버스기능 지원여부 알아내기
- 일반적인 방법 예제
function canvasSupport()
{
return !!document.createElement('testcanvas').getContext;
}
function canvasApp()
{
if(!canvasSupport()) {
return;
}
}
- 현재 가장 추천하는 방법
modernizr.js 라이브러리를 사용하는 방법인데, http://modernizr.com 에서 다운로드 받으면 된다.
<script type="text/javascript" src="modernizr.js"></script>
function canvasSupport()
{
return Modernizr.canvas;
}
canvasSupport 함수선언부 내용을 이렇게 바꾸면 되겠다.
캔버스에서 이미지로 바꾸기
canvas 를 이용해 만든 게임이나 앱화면을 이미지로 만들 수 있다. 이것은 캡처하는 기능과 비슷하다.
- 이미지로 출력하기 예제
먼저 캡처하고 싶을 때 누를 버튼을 만든다.
<form>
<input type="button" id="createImageData" value="Export Canvas Image">
</form>
var formElement = document.getElementById("createImageData");
formElement.addEventListener('click', createimageDataPressed, false );
function createImageDataPressed(e)
{
window.open( theCanvas.toDataURL(), "canvasImage", "left=0, top=0, width=" + theCanvas.width + ", height=" + theCanvas.height + ", toolbar=0, resizable=0");
}