canvas는 HTML5에서 추가된 요소로 선이나 사각형, 원, 그림등을 그리는데 사용됩니다.

그리는 순서

어느 사람이 「배다」라고 외치면 아마도「선박」을 연상할것이라고 생각합니다.

그러나「배 먹을래?」라고 말하면「과일」을 연상할거라 생각합니다.

이와 같이, 무언가를 판단할때 필요한 정보를 콘텍스트(문맥, 전후관계, 배경)라고 합니다.

canvas와 전혀 관계없어 보이지만, canvas를 습득하는 지름길은 콘텍스트에 있습니다. 똑같이 그림을 그려도 콘텍스트에 따라 그려지는 결과가 달라집니다.

붓을 든 손을 똑같이 움직여도(같은 처리를 행하여도), 그때 그림의 도구나 붓의 상태에 따라서 그려지는 내용(색깔이나 두께)이 변하는거랑 같은 이치 입니다.

canvas에 는 아래와 같은 순서로 그려집니다.

  1. HTML에서 canvas요소를 정의
  2. JavaScript에서 canvas요소를 취득
  3. canvas요소로 부터 콘텍스트를 취득
  4. 콘텍스트에 색이나 선의 두께 등을 설정
  5. 콘텍스트에 선이나 직사각형을 그린다.

와 같은 순서가 됩니다.

아래는 canvas의 사용 예시 입니다.

사용 예시

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script type="text/javascript">
		var ctx;
		function init() {
			var canvas = document.getElementById("canvas");
			ctx = canvas.getContext("2d");

			//콘텍스트 설정
			ctx.strokeStyle = "#FF0000";
			ctx.fillStyle = "#00FF00";
			ctx.lineWidth = 10;
			ctx.lineCap = "round";
			ctx.shadowColor = "#000000";
			ctx.shadowBlur = 20;

			//선 그리기
			ctx.beginPath();
			ctx.moveTo(100, 100);
			ctx.lineTo(180, 250);
			ctx.stroke();
			//칠해진 사각형 그리기
			ctx.fillRect(300, 100, 100, 150);
			//사각형 그리기
			ctx.strokeRect(500, 100, 100, 150);
		}
	</script>
</head>
<body onload="init()">
	<canvas id="canvas" width="700" height="400"></canvas>
</body>
</html>

실행 결과

HTML에서는 canvas요소를 정의 합니다.

<canvas id="canvas" width="700" height="400"></canvas>

여기서 주의해야할점은 폭을 width속성에서, 높이를 height속성에서 지정 한다는 것 입니다.

이 지정한것이 옳지 않는다면 의도한 크기로 그리려지지 않는 가능성이 있으므로 주의가 필요합니다.

JavaScript에서는 8번째 줄

var canvas = document.getElementById("canvas");

에서 canvas의 참조를 취득한 다음 9번째 줄

ctx = canvas.getContext("2d");

에서 콘텍스트를 취득합니다. ctx가 그림을 그리는 팔레트 등의 정보를 담고있는 오브젝트가 됩니다.

대다수의 프로그램에서 콘텍스트를 ctxcontext와 같은 광역변수에 대입하는게 주류이므로 알아두도록 합시다.

인수에는「2d」라고 쓰여있습니다만, 현재 HTML5에서는 「2d」밖에 지정이 안됩니다. 언젠가 가까운 미래에는 「3d」를 지정할수 있는 날이 올지도 모르겠네요

콘텍스트를 취득했다면 프로퍼티(팔레트의 속성)을 설정합니다.(11-17번째 줄)

주요 프로퍼티는 이하와 같습니다.

프로퍼티 내용
ctx.strokeStyle 선이나 윤곽의 색
ctx.fillStyle 칠하는 색
ctx.lineWidth 선의 넓이
ctx.lineCap 선의 종단의 형태로 butt、round、squre등의 값을 사용할수 있습니다.
ctx.shadowColor 현재 그림자의 색
ctx.shadowBlur 그림자에 적응할 블러 범위

콘텍스트에 프로퍼티를 설정한후 선, 칠한 사각형, 선 사각형을 그립니다.

그리기 시작할때에는 붓을 움직이는것과 같이 canvas에서는 반드시「패스」라 불리우는 궤도를 설정합니다.

그 패스를 초기화 하는것이「beginPath()」입니다.

moveTo()」로 붓을 내리고「lineTo()」로 붓을 움직입니다.

그후「stroke()」를 사용하고나서야 비로서 선을 그릴수 있게 됩니다..

참고로 「fill()」에서는 「패스」에서 감쌓인 범위가 칠해집니다.

fillRect()」와「strokeRect()」는 이름에서 부터 예상할수 있을거라 생각하지만, 색을 칠한 사각형을 그리는 함수 입니다.

좌표계는 마우스 이벤트와 같이 canvas의 좌측상단을 원점(0,0)、오른쪽으로 x축、아랫방향으로 y축이 됩니다.

(Web게임 개발) canvas의 기본

프로그래밍 메인