4장 Canvas
HTML5 기반 웹페이지를 작성할 때 기존의 웹페이지에 등장하는 직선이나 이차원(2D), 3차원(3D) 도형, 챠트(Chart), 애니메이션, 게임 등을 어떻게 구현할 수 있을까를 한번쯤
생각해보게 됩니다.
HTML5에서는 이러한 작업을 수행할 수 있도록 canvas 라는 요소를 새롭게 정의하여
사용할 수 있게 되었습니다.
현재 2차원 작업은 W3C에서 HTML Canvas 2D Context 라는 제목으로 표준화가 진행중으로 사이트는 “http://dev.w3.org/html5/2dcontext/”입니다.
3차원 작업은 Canvas 3D에서 비영리 컨소시엄인 크로노스 그룹(Khronos)이 진행하는 OpenGL 2.0에 기반한 WebGL 형태로 발전하여 현재 1.0 버전이 사용 가능합니다. 3차원 작업에 관심이 있으신 분들은 “https://www.khronos.org/registry/webgl/specs/1.0/
“ 사이트를 참고하시기 바랍니다.
canvas 요소는 단지 너비(width), 높이(height)
2 가지의 속성(Attribute)과 canvas를
구별하는 이름인 id 속성(Attribute)을 가지는 단순한
요소로 다른 HTML5 요소와 마찬가지로 HTML 태그 형태로
다음과 같이 나타낼 수 있습니다.
<canvas id=”yourCanvas”
width=”400” height=”300”><canvas>
간단하게 메모장이나 여러분이 사용하는 텍스트 에디터를 열어서 다음과 같이 코드를 작성해볼까요?
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ko">
<title>canvas 예제</title>
<style>
canvas { border: 1px solid red; }
</style>
</head>
<body>
<canvas id="yourcanvas" width="400" height="300"><canvas>
</body>
</html>위와 같이 작성한 후 “firstCanvaswithnojavascript.html”으로 저장하고 IE9, firefox 등을 이용하여 열어보면 다음과 같이 가로 400, 세로 300 픽셀의 영역이 빨간 점선라인으로 표시됩니다.
그러면 이런
상태에서 canvas에 직선이나 도형 혹은 도형이 움직이도록 하는 등의 작업들을 canvas 요소만으로 할 수 있을까요? 결론부터 말하면 canvas 자체로는 아무것도 할 수 있는 것이 없고 위와 같이 가로, 세로의
설정된 픽셀 크기만큼의 직사각형 영역만이 설정될 뿐입니다.
실제로 canvas 요소를 이용하여 설정된 직사각형 영역 안에 직선이나 도형을 그리거나
혹은 도형이 움직이도록 하는 등의 canvas 내 작업을 하기 위해서는 canvas 요소의 실제 핵심 객체인 context와 그래픽 작업과
관련된 JavaScript API를 이용해야 합니다.
1. Canvas를 사용하기
위한 기본적인 준비작업
canvas를 사용하기
위해서는 먼저 기본적으로 canvas에 위치할 선, 도형
등에 대한 좌표해석 필요합니다. 그리고 조금 전 canvas 자체로는
아무것도 할 수 없으므로 JavaScript를 이용해야 한다고 했는데
JavaScript 코드 내에서 canvas에 접근하기 위한 다양한 메서드들에 대해서 알아야
합니다. 그러면 먼저 기본적인 좌표 해석부터 알아볼까요?
1.1 기본적인 좌표해석
하나의 canvas가 설정되면 다음과 같이 직사각형
형태로 나타나는데 다음 그림과 같이 X, Y 좌표계와 같이 X축(너비), Y축(높이)의 형태로 해당 좌표값을 해석할 수 있습니다.
위 그림에서
보는 바와 같이 좌측 상단이 시작점(0, 0)으로 해서 우측 하단이 끝점이 됩니다.
1.2 캔버스(canvas)에 직선, 도형 등을 그리기 위한 기본 문서 형식
기본적으로 canvas 요소(Element)는 단순히 context를 위한 컨테이너 역할을 수행하는
요소로 canvas 내 거의 모든 그래픽 작업은 context를
이용하여 하게 됩니다.
canvas에 다양한 도형 및 이미지 등을 그리기 위해서는 “http://dev.w3.org/html5/2dcontext/”에
명시되어 있는 Canvas 2D context를 이용합니다.
이어지는 canvas 다양한 예제에서 사용할 기본
HTML 문서를 볼까요? canvas 내에 직선이나 여러 가지 다양한 도형을 그리기 위해서
다음과 같은 HTML5 문서 구조를 기본으로 사용합니다.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ko">
<title>canvas 예제</title>
<style> canvas { border: 1px solid red; } </style>
<script type=”text/javascript”>
window.onload=function() {
var canvas = document.getElementById(“yourcanvas”)
var context = canvas.getContext(“2d”);
// canvas에 그릴 선이나 도형 작성
}
</script>
</head>
<body>
<canvas id=”yourcanvas” width=”400” height=”300”><canvas>
</body>
</html>
위에서 강조된
부분은 하나씩 볼까요?
window.onload=function()
{
var canvas =
document.getElementById(“yourcanvas”)
var context = canvas.getContext(“2d”);
// canvas 그릴 선이나 도형 작성
}
위와 같은 기본적인 HTML5 문서의 구조에서 여러분들이 canvas에 일련의 작업을 수행하기 위한 사전 준비 작업으로 다음과 같은 2
단계 작업을 수행해줘야 합니다.
1 단계 : document 객체의
getElementById() 메서드를 이용하여 canvas 시작 태그 내에 포함된
id 속성값으로 canvas 변수에
넣어주기
var convas = document.getElementById(“yourcanvas”)
2 단계 : canvas 객체의 getContext() 메서드를
이용하여 canvas와 관련된 그래픽 context를
반환받아
context 변수에 넣어주기
var context = canvas.getContext(“2d”);
그리고 2 단계를 통해 반환 받은 context 변수를
이용하여 그 밑에 원하는 직선이나 도형 등에 대한 코드를 추가해주면 됩니다.
참고로 하나의 canvas 요소에는 하나의 context를
가지며 다수의 canvas 요소가 존재할 해당 canvas와
관련된 context는 독립적으로 동작합니다. 이제 위의
기본 구조를 “basic.html” 이라는 이름으로 저장합니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 Canvas에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 2. 사각형(Rectangle) 그리기 (0) | 2013.08.07 |
|---|---|
| 1.3 색상(color)과 스타일(style) (0) | 2013.08.07 |
| 8.3 getElementById(), getElementsByTagName() 메서드를 이용한 접근 (0) | 2013.08.06 |
| 8.2.3 removeChild() 메서드를 이용한 노드의 삭제 (0) | 2013.08.06 |
| 8.2.2 replaceChild() 메서드를 이용한 기존 노드의 교체 (0) | 2013.08.06 |