HTML - 캔버스 도형 그리기

 캔버스에 그리는 2가지 방법이 있습니다. 먼저 선이나 원, 사각형 등 모양을 만들어 경로에 담은 다음 경로를 따라 칠하거나 랜더링하는 방법이 있고 두 번째는 경로에 담지 않고 바로 캔버스에 그리는 방법이 있습니다. 

프로퍼티	설 명
strokeStyle	선 색상
fillStyle	채우려는 색상
globalAlpha	투명도를 지정. 0 ~ 1사이의 값 (0에 가까울수록 투명해짐)
lineWidth	도형의 선 두께 지정

아래 표의 방법은 경로에 담아 한번에 그리는 메서드 입니다.

메서드	설 명
beginPath()	빈 경로를 만듬
closePath()	경로의 시작점과 끝점을 서로 연결하는 선을 추가
moveTo(x, y)	경로에 시작점 설정 x: 캔버스에서 x좌표로 이동할 거리 y: 캔버스에서 y좌표로 이동할 거리
lineTo(x, y)	직선의 시작점과 끝점을 설정 x: x축 직선의 시작점 설정 y: y축 직선의 끝점 설정
rect(x, y, w, h)	현재 경로에 사각형을 만듬 x: 캔버스에서 x좌표로 이동할 거리 y: 캔버스에서 y좌표로 이동할 거리 w: 도형 가로 크기 h: 도형 세로 크기
arcTo(x1, y1, x2, y2, radius)	두 제어점 사이의 호/곡선을 만듬 x1: x1축 제어점 y1: y1축 제어점 x2: x2축 제어점 y2: y2축 제어점 radius: 원호의 반지름
arc(x, y, radius, start, end, ant)	원 또는 원의 일부를 만듬 x: 캔버스에서 x좌표로 이동할 거리 y: 캔버스에서 y좌표로 이동할 거리 radius: 반지름 start: 반지름 시작점 설정 end: 반지름 끝점 설정 ant: 원호를 시계 반대방향으로 그릴지 설정  true or false 중 하나.  true 이면 시계 반대방향. 기본값: false (ant 는 anticlockwise를 뜻함.)
quadraticCurveTo(cpx, cpy, x, y)	2차 곡선(베지어) 그리기 cpx: x축 제어점 cpy: y축 제어점 x: x축 끝점 y: y축 끝점
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)	3차 곡선(베지어) 그리기 cp1x: x1축 제어점 cp1y: y1축 제어점 cp2x: x2축 제어점 cp2y: y2축 제어점 x: x축 끝점 y: y축 끝점
fill()	경로에 만들어진 채워진 모든 도형을 캔버스에 그리기
stroke()	경로에 만들어진 외곽선만 있는 모든 도형을 캔버스에 그리기

아래 메서드는 경로에 담지 않고 바로 캔버스에 그릴 수 있는 메서드 입니다.

메서드	설 명
clearRect(x, y, w, h)	캔버스에 그려진 사각형 일부를 지우기 x: 캔버스에서 x좌표로 이동할 거리 y: 캔버스에서 y좌표로 이동할 거리 w: 삭제할 도형 가로 크기 h: 삭제할 도형 세로 크기
fillRect(x, y, w, h)	외곽선 없는 채워진 사각형을 캔버스에 바로 그리기 x: 캔버스에서 x좌표로 이동할 거리 y: 캔버스에서 y좌표로 이동할 거리 w: 도형 가로 크기 h: 도형 세로 크기
strokeRect(x, y, w, h)	외곽선만 있는 사각형을 캔버스에 바로 그리기 x: 캔버스에서 x좌표로 이동할 거리 y: 캔버스에서 y좌표로 이동할 거리 w: 도형 가로 크기 h: 도형 세로 크기
fillText(str, x, y, [,mw])	외곽선 없는 채워진 텍스트를 캔버스에 바로 그리기 str: 문자열 x: 캔버스에서 x좌표로 이동할 거리 y: 캔버스에서 y좌표로 이동할 거리 mw: 최대 너비(maxWidth) 선택사항 mw 가 지정된 경우 텍스트는 mw 폭 크기에 맞게 조정된 텍스트를 채움
strokeText(str, x, y, [,mw])	외곽선만 있는 텍스트를 캔버스에 바로 그리기 str: 문자열 x: 캔버스에서 x좌표로 이동할 거리 y: 캔버스에서 y좌표로 이동할 거리 mw: 최대 너비(maxWidth). 선택사항 mw 가 지정된 경우 텍스트는 mw 폭 크기에 맞게 조정된 텍스트를 채움

사각형 그리기

사각형을 그리는 방법에는 색상이 채워진 사각형을 그리는 fillRect()와 외곽선을 그리는 strokeRect(), 그리고 이전에 그려진 사각형을 지우는 clearRect()가 있습니다.

<style>canvas { border: 1px solid black; }</style>
<canvas id="mycanvas"/>

<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
canvas.width = 300;
canvas.height = 300;
var context = canvas.getContext('2d');

// 채워진 사각형
context.fillStyle = "rgb(0,255,0)";
context.fillRect(10,10,100,100);

// 채워진 사각형
context.fillStyle = "rgba(255,0,200,0.5)";
context.fillRect(30,30,100,100);

// 도형 부분 삭제
context.clearRect(30,30,80,80);

// 와곽선만 있는 사각형
context.strokeRect(150,90,50,50);
</script>

채워진 사각형 두 개를 먼저 그렸고 그려진 도형 일부를 clearRect()로 부분 삭제하였기 때문에 겹쳐진 도형 가운데가 흰색이 되었습니다. 다시 작은 외곽선만 있는 도형을 그렸습니다.

다음은 두 개의 겹쳐진 사각형과 텍스트를 경로에 담지 않고 캔버스에 바로 그려 보겠습니다.

<style>canvas { border: 1px solid black; }</style>
<canvas id="mycanvas"/>

<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
canvas.width = 300;
canvas.height = 300;
var context = canvas.getContext('2d');

// 첫 번째 사각형
context.fillStyle = "rgb(0,255,0)";
context.fillRect(10,10,100,100);

// 두 번째 사각형
context.fillStyle = "rgba(255,0,200,0.5)";
context.fillRect(30,30,100,100);

// 텍스트 표시
context.fillStyle = "rgb(0,0,0)";
context.fillText("안녕 하보니!", 120,20);
context.fillText("만나서 반가워~", 150,30);
</script>

fillStyle과 fillRect()를 이용해 컬러 체커를 생성할 수 있습니다.

<style>canvas { border: 1px solid black; }</style>
<canvas id="mycanvas"/>

<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
canvas.width = 300;
canvas.height = 150;
var context = canvas.getContext('2d');

context.beginPath();
for(var i=0; i<6; i++){
  for(var j=0; j<6; j++){
    var R = Math.floor(255-45.5*i);
	var G = Math.floor(255-42.5*j);
	var B = 0;
	context.fillStyle = "rgb(" + R + ", " + G + ", " + B + ")"
	context.fillRect(j*25, i*25, 25, 25);
  }
}
</script>

선 그리기

캔버스에서는 직선, 2차 베지어, 3차 베지어 곡선 등 다양한 형식의 선을 그릴 수 있습니다. 다음은 외곽선 두 개의 직선, 외곽선으로 그린 닫힌 선, 마지막으로 채워진 선을 경로에 담아 그렸습니다. 닫힌 선과 채워진 선은 시작점과 끝점을 서로 이어서 연결해주므로 삼각형의 도형이 됩니다.

<style>canvas { border: 1px solid black; }</style>
<canvas id="mycanvas"/>

<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
canvas.width = 300;
canvas.height = 200;
var context = canvas.getContext('2d');


// 외곽선 그리기
context.beginPath();
context.moveTo(10,10);
context.lineTo(60,10);
context.lineTo(60,60);
context.stroke();

// 닫힌 선 그리기
context.beginPath();
context.moveTo(70,10);
context.lineTo(120,10);
context.lineTo(120,60);
context.closePath();
context.stroke();

// 채워진 선 그리기
context.beginPath();
context.moveTo(130,10);
context.lineTo(180,10);
context.lineTo(180,60);
context.closePath();
context.fill();
</script>

곡선 그리기

2차 곡선을 경로에 담아 그리려면 quadraticCurveTo() 를 사용합니다. cpx 와 cpy 를 기준으로 끝점이 x*y 인 베지어 곡선을 그립니다.

<style>canvas { border: 1px solid black; }</style>
<canvas id="mycanvas"/>

<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
canvas.width = 300;
canvas.height = 200;
var context = canvas.getContext('2d');


context.beginPath();
context.moveTo(10, 10);
context.quadraticCurveTo(240, 10, 240, 60);
context.stroke();
</script>

다음은 3차 곡선 그리려면 bezierCurveTo() 를 사용합니다. 여기서는 2개의 제어점이 있습니다. cp1x 와 cp1y, 그리고 cp2x 와 cp2y 를 기준으로 끝점이 x, y 인 3차 베지어 곡선을 그립니다.

<style>canvas { border: 1px solid black; }</style>
<canvas id="mycanvas"/>

<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
canvas.width = 300;
canvas.height = 200;
var context = canvas.getContext('2d');


context.beginPath();
context.moveTo(10,10);
context.bezierCurveTo(20, 100, 200, 100, 200, 50);
context.stroke();
</script>

빨간색은 제어점입니다. 두 제어점이 시작점과 끝점에서 서로 당기므로 위 그림처럼 곡선이 만들어졌습니다. 이해를 돕고자 3차 곡선을 하나 더 예를 만들어 보겠습니다.

<style>canvas { border: 1px solid black; }</style>
<canvas id="mycanvas"/>

<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
canvas.width = 300;
canvas.height = 200;
var context = canvas.getContext('2d');

context.beginPath();
context.moveTo(50,100);
context.bezierCurveTo(100, 50, 150, 150, 200, 100);
context.stroke();
</script>

호 그리기

arcTo() 는 두 제어점 사이의 호/곡선을 만들 때 사용하고 arc() 는 원 또는 원의 일부를 만들 때 사용합니다. arcTo() 는 특히 모서리를 부드럽게 할 때 많이 사용합니다.

<style>canvas { border: 1px solid black; }</style>
<canvas id="mycanvas"/>

<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
canvas.width = 300;
canvas.height = 150;
var context = canvas.getContext('2d');

context.beginPath();
context.moveTo(20, 20);
context.lineTo(100, 20);
context.arcTo(150, 20, 150, 70, 50);
context.lineTo(150, 120);
context.stroke(); 
</script>

다소 복잡해 보이지만 x*y 20(px)지점에서 100(px)*20(px) 지점에 직선을 만듭니다. 빨간색이 제어점이며 첫 번째 제어점이 사각형의 모서리 부분, 50(px)만큼 호를 그립니다. 다음 예제는 몇 가지 모서리를 부드럽게 한 결과입니다.

<style>canvas { border: 1px solid black; }</style>
<canvas id="mycanvas"/>

<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
canvas.width = 700;
canvas.height = 200;
var context = canvas.getContext('2d');

function rect(context, x, y, width, height, radius) {
  context.beginPath();
  // 오른쪽 상단 모서리
  context.moveTo(x + radius, y); 
  // 오른쪽 상단 모서리
  context.arcTo((x+width), y, (x+width), (y+height), radius); 
  // 오른쪽 하단 모서리
  context.arcTo((x+width), (y+height), x, (y+height), radius); 
  // 왼쪽 하단 모서리
  context.arcTo(x, (y+height), x, y, radius); 
  // 왼쪽 상단 모서리
  context.arcTo(x, y, (x+radius), y, radius); 
  // 선 그리기
  context.stroke();
}

rect(context, 50, 50, 100, 100, 10);
rect(context, 200, 50, 100, 100, 20);
rect(context, 350, 50, 100, 100, 30);
rect(context, 500, 50, 100, 100, 40);
</script>

다음은 arc() 의 예제입니다. Math.PI 를 사용하면 완전한 호를 만들 수 있습니다. 

<style>canvas { border: 1px solid black; }</style>
<canvas id="mycanvas"/>

<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
canvas.width = 300;
canvas.height = 150;
var context = canvas.getContext('2d');

context.beginPath();
context.arc(100, 75, 50, 0, 2 * Math.PI);
context.stroke(); 
</script>

canvas에서는 원을 그리는 기능이 없지만 호의 시작각도와 끝점 각도의 합이 360도가 되도록 하면 원을 그릴 수 있습니다. 또 fill() 를 이용하면 색을 채울 수 있습니다. 위 예제에서 100*75(px) 지점이 호의 중심점이고 호의 반지름은 50(px), 시계방향으로 0지점부터 2*PI 지점까지 호를 그립니다. 그림에 나와있듯 2*PI는 360도, 1*PI는 180도입니다.