캔바스는 여러가지 랜더링이 존재하는데 그중에 우리는 현재 정의가 어느정도 된 2D랜더링 부분에 대해서 집중하고자 합니다.
물론 차후에는 좀더 다양한 종류의 렌더링이 지원될것인데, 예를들면 OpenGL 에 기반한 3D컨텍스트 등이 준비중입니다.
canvas는 기본적으로 비어있는데 이를 사용하기 위해서 우리는 스크립트로 canvas에 접근할 필요성이 있습니다.
canvas엘리먼트에는 그림그리는데 필요한 기능을 가진 getContext 라는 DOM 메소드가 존재합니다.
- var canvas = document.getElementById('tutorial');
- var ctx = canvas.getContext('2d');
위의 예제에서 우리는 tutorial 이라는 id를 가진 canvas 를 DOM 노드를 이용해 접근하였고
해당객체에서 getContext 메쏘드를이용해 2d 컨텍스트에 접근하였습니다.
지원확인
- var canvas = document.getElementById('tutorial');
- if (canvas.getContext){
- var ctx = canvas.getContext('2d');
- // drawing code here
- } else {
- // canvas-unsupported code here
- }
getContext 메쏘드를 확인하는것으로 간단하게 현재 브라우저가 지원하는 지 아닌지 여부를 판단할수있습니다.
간단 템플릿
- <html>
- <head>
- <title>Canvas tutorial</title>
- <script type="text/javascript">
- function draw(){
- var canvas = document.getElementById('tutorial');
- if (canvas.getContext){
- var ctx = canvas.getContext('2d');
- }
- }
- </script>
- <style type="text/css">
- canvas { border: 1px solid black; }
- </style>
- </head>
- <body onload="draw();">
- <canvas id="tutorial" width="150" height="150"></canvas>
- </body>
- </html>
위의 코드를 실행해보면 간단한 박스가 나타나는것을 볼수있습니다.
캔버스를 사용하는 뼈대라고 볼수 있습니다. 캔버스를 생성하고. 스크립트로 컨텍스트를 받아왔으며, 간단한
스타일시트로 스타일도 주었습니다.
앞으로 사용하게될 많은 캔버스들이 이 기본구조를 크게 벗어나지는 않을것입니다.
'모바일 WEB 관련 > HTML5' 카테고리의 다른 글
| [Canvas] canvas 6. path도형 그리기 (0) | 2011.01.08 |
|---|---|
| [Canvas] canvas 5. 도형 그리기 (0) | 2011.01.08 |
| [Canvas] canvas 4. 간단한예제 (0) | 2011.01.08 |
| [Canvas] canvas 2. 기본사용법. (2) | 2011.01.08 |
| [Canvas] canvas 1. 소개 (0) | 2011.01.08 |
