저번 강의 까지, canvas에는 컨텍스트에 프로퍼티를 설정하고, 그리기용 명령을 실행하는 순서로 도형을 그렸습니다.

이번 강의 는 도형의 종류별로 설정할수 있는 속성이나 작성법과 개요에 대하여 보도록 합시다.

직선・다각형

직선이나 다각형을 그리기위해 필요한 함수, 프로퍼티는 이하와 같습니다.

함수, 프로퍼티 설명
beginPath() 패스를 클리어 합니다.
moveTo(x,y) (x,y)좌표에 붓을 내립니다.
lineTo(x,y) (x,y)좌표에 붓을 움직입니다.
closePath() 패스를 닫습니다.(붓을 시작점까지 움직입니다.)
stroke() 붓을 임직인 궤적대로 선을 그립니다.
fill() 붓이 움직인 궤적의 범위만큼 색을 칠합니다.
strokeStyle() 선을 그릴때의 색을 지정합니다.
fillStyle() 칠할때의 색을 지정합니다.

패스를 닫았을 경우와 닫지 않았을 경우 각각에 대해서, 색을 칠할때, 궤적을 그릴때 4패턴의 샘플을 아래에 만들어 봤습니다.

예제

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script>
		var ctx;
		function init() {
			var canvas = document.getElementById("canvas");
			ctx = canvas.getContext("2d");
			ctx.strokeStyle = "#ff0000"
			ctx.fillStyle = "#00ff00"
			drawTriangle(100, 10, false, false);
			drawTriangle(200, 10, true, false);
			drawTriangle(300, 10, false, true);
			drawTriangle(400, 10, true, true);
		}

		function drawTriangle(x,y, isClose, isFill) {
			ctx.beginPath();
			ctx.moveTo(x,y);
			ctx.lineTo(x+80,y);
			ctx.lineTo(x+80,y+80);

			if(isClose) {
				ctx.closePath();
			}

			if(isFill) {
				ctx.fill();
			} else {
				ctx.stroke();
			}
		}
	</script>
</head>
<body onload="init()">
	<canvas id="canvas" width="500" height="100"></canvas>
</body>
</html>

실행결과

패스를 초기화 하지 않았을 경우, 혹은, 패스를 닫지 않음으로 인해 의도한대로 그려지지 않는것도 자주 있는 일입니다.

선을 그릴때는 반드시 beginPath()를 실행하는것을 습관화 하도록 합시다.

연습

  1. 마우스를 누른 좌표부터 손을 땐 좌표까지의 점을 선분으로 이어지게 만드는 페이지를 작성해봅니다.
  2. 마우스가 누른 점으로부터 손을땜 좌표까지의 궤적을 그리는 페이지를 작성해 봅시다.

사각형

사각형을 그리기 위해 필요한 함수는 아래와 같습니다.

함수 설명
ctx.strokeStyle 선이나 윤곽의 색깔
strokeRect(x, y, w, h) (x, y)를 왼쪽 상단으로 하여, 폭w, 높이h의 사각형의 윤곽을 그립니다.
fillRect(x, y, w, h) (x, y)을 왼쪽 상단으로 하여, 폭w, 높이h의 사각형을 칠합니다.
clearRect(x, y, w, h) (x, y)을 왼쪽 상단으로 하여, 폭w, 높이h의 사각형을 클리어 합니다.

사각형을 그리는것은 패스에 영향을 주지 않으므로 beginPath()나 closePath()를 실행할 필요는 없습니다.

예제

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

			ctx.strokeStyle = "#ff0000"
			ctx.strokeRect(10, 10, 80, 80)

			ctx.fillStyle = "#00ff00"
			ctx.fillRect(110, 10, 80, 80)
			ctx.fillRect(210, 10, 80, 80)
			ctx.clearRect(230, 30, 40, 40)
		}
	</script>
</head>
<body onload="init()">
	<canvas id="canvas" width="300" height="100"></canvas>
</body>
</html>

실행결과

원, 원호

원을 그리기 위하여 필요한 함수는 아래와 같습니다.

arc(x, y, radius, startAngle, endAngle, anticlockwise)

(x, y)를 중심으로 하여 반지름 radius로 startAngle부터 endAngle까지의 호의 패스를 그립니다.

startAngle은 원호를 그리기위한 시작각도, endAngle는 종료 각도 입니다.

arc는 단순히 패스를 그리기 위한 함수 이므로, 실제로 그리기 위해서는 stroke()나 fill()를 실행할 필요가 있는것에 주의 합시다.

각도는 라디안이라 불리우는 단위로 지정합니다. 이것은 1회전(360도)를 2*π(=3.1415…*2)라 하는 단위 입니다. 각도로 부터 라디안으로 변환하는 법은 각도*π÷180로 구할수 있습니다.

예를들어, 60도는 라디안으로 표기하면 60*π÷180=π÷3이 됩니다.

anticlockwise을 true로 지정하면 반시계 방향으로 돌고, false로 지정하면 시계방향으로 돕니다.

예제

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

			ctx.strokeStyle = "#ff0000";
			ctx.fillStyle = "#00ffff";
			ctx.lineWidth = 5;

			ctx.beginPath();//1:원
			ctx.arc(100, 50, 30, 0, 2*Math.PI);
			ctx.closePath();
			ctx.fill();

			ctx.beginPath();//2:부채꼴(시계방향)
			ctx.moveTo(200, 50);
			ctx.arc(200, 50, 30, 0, Math.PI/3);
			ctx.closePath();
			ctx.stroke();

			ctx.beginPath();//3:부채꼴(반시계방향)
			ctx.moveTo(300, 50);
			ctx.arc(300, 50, 30, 0, Math.PI/3, true);
			ctx.closePath();
			ctx.stroke();
			
			ctx.beginPath();//4:부채꼴(반시계방향)
			ctx.moveTo(400, 50);
			ctx.arc(400, 50, 30, -1*Math.PI/6, Math.PI/6, true)
			ctx.closePath();
			ctx.fill();

			ctx.beginPath();//5:원호의 패스만
			ctx.arc(500, 50, 30, 0, 2*Math.PI/3)
			ctx.fill();
		}
	</script>
</head>
<body onload="init()">
	<canvas id="canvas" width="600" height="400"></canvas>
</body>
</html>

위의 샘플에 따른 파라미터와 실제그림을 아래에 표시해 보았습니다.

실행결과

원의 경우에는 시작각도가 0, 종료 각도를 2*π으로 지정합니다.

원호의 경우는 시작각도와 종료각도를 지정합니다만, 원호를 그리기 위한 방향에 따라 결과가 크게 달라지므로 주의가 필요합니다.

문자

문자를 그리기 위해 필요한 함수는 이하와 같습니다.

함수 설명
strokeText(text, x, y) x,y좌표에 text의 윤곽을 그립니다.
fillText(text, x, y) x,y좌표를 기점으로 칠해진 text를 그립니다.

예제

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

			ctx.font = "36px 'Time New Roman'";
			ctx.strokeStyle = "blue";
			ctx.strokeText("strokeText에 의한 문자", 10, 50);
		}
	</script>
</head>
<body onload="init()">
	<canvas id="canvas" width="400" height="120"></canvas>
</body>
</html>

실행 결과

이미지

이미지를 표시하기 위해서 필요한 함수는 이하와 같습니다.

함수 설명
draw(image, x, y) x,y위치에 이미지 img를 그립니다.
draw(image, x, y, w, h) x,y위치에 w,h사이즈로 이미지 img를 그립니다.
draw(image, sx, sy, sw, sh, x, y, w, h) x,y위치에 w,h사이즈로 이미지 img를 sx,sy부터 sw,sh까지의 이미지를 잘라내어 그립니다.

예제

<!DOCTYPE html>
<html>
<head>
	<style>
		#field {
			width: 600px;
			height: 800px;
		}
	</style>
	<script>
		function init () {
			var squre = new Image();
			var field = document.getElementById("field");
			var ctx = field.getContext("2d")

			squre.src = "https://dripcoke.com/wp-content/uploads/2019/11/dz_4.png";

			ctx.drawImage(squre, 10, 10);
			ctx.drawImage(squre, 200, 10, 100, 200);
			ctx.drawImage(squre, 0, 0, 10, 10, 10, 200, 200, 100);
		}
	</script>
</head>
<body onload="init()">
	<canvas id="field" width="800" height="800"></canvas>
	<img src="https://dripcoke.com/wp-content/uploads/2019/11/dz_4.png" style="display: none;">
</body>
</html>

실행결과

(Web게임 개발) canvas의 기본

프로그래밍 메인