HTML5 | canvas 요소 | HTML5로 canvas에 도형 그리기 | 사각형과 원, 선
Canvas는 HTML5에서 새로 등장한 가장 획기적인 요소 중 하나다.
그림을 그릴 수 있고 애니메이션과 스프라이트도 표현할 수 있다. 이 기능이 생기기 전 까지 flash player 나 다른 써드파티 플러그인에 의존해야 했는데 이제는 그럴 필요가 없다. canvas 요소는 웹브라우저 안에서 html 태그 형식으로 JavaScript 와 함께 동작한다.
텍스트나 박스 모양의 컨테이너를 다루는 다른 태그들과 달리 캔버스안에 픽셀로 그림을 그릴 수 있고 이미지를 로드할 수 있다. 제대로된 그래픽을 처리할 수 있게 되었다.
* canvas 요소의 예제를 알아본다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> CANVAS </title>
</head>
<body onload="pageLoad();">
<div id="mydiv">My Class Inner HTML</div>
<canvas width="540" height="480" id="testcanvas" style="border: 1px solid lightblue;">
Your browser does not support HTML5 Canvas. Please shift to a newer browser.
</canvas>
<script src="./javascript.js"></script>
</body>
</html>
캔버스를 생성한다. width 와 height 로 너비와 높이를 설정하고 보더스타일을 추가하면 웹브라우저에 표시된다. 여기까지는 자바 스크립트 없이도 가능하다.
여기다가 그리는 기능을 수행하려면 자바스크립트에서 DOM 객체를 사용한다.
function pageLoad(){
// Get a handle to the canvas object
var canvas = document.getElementById("testcanvas");
// Get the 2d context for this canvas
var context = canvas.getContext("2d");
// Our drawing code here...
context.fillStyle = "rgb(50, 200, 50)";
context.fillRect(200, 200, 100, 100);
context.fillRect(50, 50, 70, 50);
}
스크립트에서 먼저 할 일은 canvas를 선택하는 것이다. 다른 요소들처럼 id로 선택할 수 있다.
canvas 인스턴스의 getContext 메소드는 컨텍스트 인스턴스를 반환하는데 "2d" 매개변수는 canvas에서 2D 그래픽을 다루는 것을 알려준다.
이제 그림을 그리는 것은 context에서 시작한다. fillStyle은 rgb 색상을 지정할 수 있다. G 부분의 값을 높게 주면 초록색계열이 된다. fillRect 메소드는 Rectangle 사각형을 채우는 메소드이다. 좌표가 4개 들어갈 때는 시작점을 기준으로 한 위치 posision x, y 가 들어가고 세번째 네번째 매개변수는 너비와 높이이다. 사각형을 그리는 대부분은 함수를 이렇게 짓는다. 사각형을 그리기 위해서는 시작점과 끝나는 좌표 2개가 필요하다. 이건 어느 사각형이나 공통이다.
좌표의 시작점이 좌측 하단이라고 생각할 수 있는데 canvas는 x, y가 0, 0이 되는 좌표는 좌측 상단에 있다.
컴퓨터 그래픽스에서는 좌상단에서 우하향으로 내려오는 좌표계를 많이 쓴다.
* strokeRect 메소드는 비어있는 사각형이다.
context.strokeRect(200, 200, 100, 100);
context.strokeRect(50, 50, 70, 50);
* 선을 그리면 beginPath 메소드로 컨텍스트를 시작하고 moveTo와 LineTo로 Path를 기록한다. 마지막에 stroke 하면 Path에 저장된 선의 경로를 따라서 그림을 그린다.
context.beginPath();
context.moveTo(100, 100);
context.lineTo(200, 300);
context.closePath();
context.stroke();
* 선을 두개그리면 나머지 하나의 선도 연결해서 도형으로 그려준다. 선을 세개 그리면 사각형이 나온다.
context.beginPath();
context.moveTo(100, 100);
context.lineTo(200, 300);
context.lineTo(400, 100);
context.closePath();
context.stroke();
* 투명한 사각형을 그리는 것은 아래 코드와 같다. fillRect 위에 그리면 창문 모양처럼 그려진다.
context.fillStyle = "rgb(50, 200, 50)";
context.fillRect(200, 200, 100, 100);
context.clearRect(210, 210, 50, 50);
* 원과 호는 arc 메소드를 사용한다. 이동하는 선이 보이지 않으려면 moveTo 메소드로 좌표를 이동한다.
context.beginPath();
context.arc(100,100, 50, 0, -4/2*Math.PI, true);
context.arc(200,200, 40, 0, -3/2*Math.PI, true);
context.arc(300,300, 30, 0, -2/2*Math.PI, true);
context.arc(400,400, 30, 0, -1/2*Math.PI, true);
context.stroke();
HTML5에서 도형을 그리는 기본적인 코드를 알아봤다. 기존의 텍스트와 박스만 가지고 사용하는 HTML과 다르게 느껴진다. 코드를 실행할 때 html의 canvas 태그와 js파일의 스크립트가 어떻게 연결되는지 잘 살펴본다.
