Canvas API

Canvas API

우선 canvas 엘리먼트를 보면 다음과 같이 사용한다.

width는 300 height는 150이 기본 값이고 해당 값과 css 넓이를 따로 지정할 수 있는데 만약 비율이 잘못되거나 canvas 엘리먼트에서 지정한 넓이, 높이 속성이 너무 작은 경우 css로 크게 확장하면 화질이 깨져보일 수 있다.

사용법

<canvas id="tutorial" width="150" height="150"></canvas>

기본적으로 아래와 같이 2D 그래픽을 그리기 위해 다음과 같이 드로잉 컨텍스트에 엑세스한다.

var canvas = document.getElementById("tutorial");
var ctx = canvas.getContext("2d");

이후 일반적으로 사용되는 코드와 함께 보면 다음과 같다.

참고로 좌측상단을 기준으로 0,0이다.

사각형 만들기

// 사각형 그리기 (시작X좌표, 시작Y좌표, 넓이, 높이)
ctx.fillRect(25, 25, 100, 100);
// 특정 범위의 사각형 지우기
ctx.clearRect(45, 45, 60, 60);
// 윤곽선 만들기
ctx.strokeRect(50, 50, 50, 50);

점과 선으로 도형 만들기

ctx.beginPath();
// beginPath로 시작하는 것을 알리고 포인터를 이동하는 느낌이다.
ctx.moveTo(75, 50);
// 현재 포인터는 moveTo로 이동한 위치 (75, 50)
// 여기서 lineTo를 통해 (75, 50) 부터 (100, 75)로 라인을 그린다.
ctx.lineTo(100, 75);
ctx.lineTo(100, 25);
// 위에서 라인을 다 그리고 내부를 채우는 것이다.
// 만약 내부를 채우는 것이 아니라면 ctx.stroke()를 이용하면 선을 그냥 그릴 수 있다.
// 택스트를 채우는건 ctx.fillText(text, x, y)로 가능하다.
ctx.fill();