[HTML5 & Javascript] Canvas Basic (그리면서 배우는 도형그리기 기초)
canvas란?
canvas는 HTML5의 표준 스팩으로 canvas태그 내에서 javascript를 이용해 드로잉 할 수 있는 API를 제공하고 있다.
쉽게 정의하면 canvas는 제공된 javascript api로 그림을 그릴 수 있는 영역을 의미한다.
언제 사용할 수 있을까?
브라우저에서 간단한 도형이나 그림, 애니메이션등이 필요할 때 사용할 수 있다. 현재 이미지를 표현할 때 SVG가 많이 사용되지만 Canvas는 SVG에 비해 게임 등 그래픽조작이 많을 때 성능 상에서 유리함을 가지고 브라우저의 지원범위가 넓기 때문에 상황에 맞는 기술의 선택이 필요하다. 개인적인 느낌으로는 HTML5에 기반한 간단한 게임을 만들거나 애니메이션을 구현할 때 좋은 선택이 될 수 있을 것으로 판단한다.
도형그리기 실습
우선 canvas태그로 그림이 그려질 공간을 만들어보자.
<canvas id="canvas"></canvas>
- * 이제 그림을 그릴 수 있는 canvas가 생성된 것이다. 이제 이 영역에 javascript를 이용해서 그림을 그릴 수 있게된 것이다.
다음으로 가장 간단한 사각형을 캔버스 API로 만들어 보자.
- * 주의할 점은 스크립트는 DOM이 생성된 이후에 실행되어야 한다.
- * 사각형을 그리기 위해서는 사각형의 위치, 가로길이, 세로길이, 색상이 필요하고 이를 바탕으로 canvas api를 사용하는 함수를 만들었다.
- * 윤곽선이 필요한 경우를 위해 border값은 선택값으로 추가하였다.
- * 채워지지 않은 사각형을 그릴 경우의 옵션값을 마지막옵션값을 추가하였다.
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
function drawBox({x, y, width, height, color, borderColor, isEmpty}) {
ctx.fillStyle = color;
ctx.fillRect(x, y, width, height);
if (border) {
ctx.strokeStyle = border;
ctx.strokeRect(x, y, width, height);
}
if (isEmpty) {
ctx.clearRect(x, y, width, height);
}
}
drawBox({
x: 10,
y: 10,
width: 50,
height: 50,
color: 'red',
borderColor: 'black'
})
drawBox({
x: 70,
y: 10,
width: 50,
height: 50,
border: 'black',
isEmpty: true
})
- * 결과는 50*50의 검정색 테투리를 가진 빨간색 사각형와 검정색 테투리의 비어있는 사각형이 생성되었다.
다각형을 만들어보자.
- * 사각형의 경우 API를 활용하여 간단히 만들었다면 다각형은 직선의 조합으로 만들 수 있다.
- * 즉 각각의 꼭지점의 좌표만 찍어주면 도형이 완성되고 아래의 삼각형 그리기 예제를 통해 확인해보자
- * 즉 x축, y축좌표만 찍어주면 되는 것이다.
- * 색상이나 테투리의 스타일을 지정하는 것은 사각형과 같다.
function draw() {
ctx.beginPath();
ctx.moveTo(75, 50);
ctx.lineTo(100, 70);
ctx.lineTo(100, 25);
ctx.fill();
}
}
완성된 도형이 아닌 직선을 그리는 예제도 간단히 보고 가자.
- * 여기서 사용되는 api는 stroke매서드 이다.
ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 10); ctx.lineTo(10, 100); ctx.stroke();
마지막으로 원을 그려보자.
- * 원이나 호의 경우는 arc매서드를 이용한다.
arc(x좌표, y좌표, 반지름, 시작각도, 끝각도, 시계반대방향으로) - * 아래 코드는 MDN의 스마일 그리기 예제이다.
ctx.beginPath();
ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle
ctx.moveTo(110, 75);
ctx.arc(75, 75, 35, 0, Math.PI, false); // Mouth (clockwise)
ctx.moveTo(65, 65);
ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // Left eye
ctx.moveTo(95, 65);
ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // Right eye
ctx.stroke();
- * 간단한 원은 쉽게 구현하지만 곡선이나 응용을 위해서는 약간의 수학적인 지식이 필요하다.
- * 다양한 케이스가 있기 때문에 그리고자 하는 대상을 정해놓고 만들어보면서 필요한 부분을 학습하는 것이 좋을 것 같다.
- * 대상을 정하기 어렵다면 MDN이나 시중의 책에 실려있는 예제를 따라해보면 좋을 것 같다.
지금까지 만든 도형에 다양한 스타일 추가하기
이제 도형에 색상과 윤곽선 이외의 다양한 스타일을 추가하는 API를 정리해보자.
- * 투명값 (globalAlpha 또는 rgba)
//case1
ctx.globalAlpha = 0.2;
//case2 (rgba로 윤곽선과 도형색상에 투명도 적용하기)
ctx.strokeStyle = 'rgba(255, 0, 0, 0.2)';
ctx.fillStyle = 'rgba(255, 0, 0, 0.2)';
- * 선 스타일
//두께
ctx.lineWidth = 5;
//끝부분 처리 (좌표에 맞게 잘림, 둥글게표현, 각지게표현)
ctx.lineCap = 'butt' || 'round' || 'square'
//연결지점처리 (둥글게, 세모모양, 마름모)
ctx.lineJoin = 'round' || 'bevel' || 'miter'
- * 도형 채우기
//그리디언트
var lingrad = ctx.createLinearGradient(0, 0, 0, 150);
lingrad.addColorStop(0, '#00ABEB');
lingrad.addColorStop(0.5, '#fff');
ctx.fillStyle = lingrad;
ctx.fillRect(10, 10, 130, 130);
// 패턴이미지
var img = new Image();
img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
img.onload = function() {
var ptrn = ctx.createPattern(img,'repeat');
ctx.fillStyle = ptrn;
ctx.fillRect(0,0,150,150);
마무리
지금까지 캔버스로 도형그리기의 가장 기본적이고 자주 사용 되는 내용을 정리해보았다. 여기까지는 ‘canvas’의 아주 기초적인 내용으로 마치 미술을 처음 시작할때 직선을 그리는 연습하는 과정과 비슷하다고 생각한다. 선그리기에 기초하여 멋진 그림이 완성되는 것 처럼 캔버스 도형그리기에 숙달된다면 원하는 애니메이션을 만들고 게임을 만들 수 있을 것이라 생각한다. 일단 흥미를 가지고 계속 해보는 것이 중요할 것이다.
참고자료
http://tcpschool.com/html/html5_graphic_canvas
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API