[Canvas] 1. Canvas API

찐새·2022년 7월 31일

JavaScript

Javascript

목록 보기

1/11

1. Canvas API

Canvas API란?

HTML의 <canvas> 엘리먼트를 활용해 그래픽을 구성하는 수단을 제공하는 Javascript API이다.애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작 및 실시간 비디오 처리를 위해 사용된다.

1-1. canvas 생성

API를 활용하기 전에 간단한 사전 준비가 필요하다. HTML 문서에 <canvas> 태그를 적고, API를 활용할 js을 연결한다.

<body>
  <canvas></canvas>
  <script src="app/js"></script>
</body>

app.js에서는 canvas 엘리먼트를 획득 후 context()를 연결한다.

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
canvas.width = 800;
canvas.height = 800;

canvas의 너비와 높이는 800px로 맞췄고, context는 평면 그림을 그릴 것이므로 "2d"를 선택했다.
getContext()는 드로잉, 즉 붓을 반환한다고 생각하면 된다.

1-2. 사각형 그리기

기본적으로 사각형을 그려보자.

ctx.fillRect(50, 50, 100, 100);
ctx.strokeRect(160, 50, 100, 100);

ctx.rect(270, 50, 100, 100);
ctx.fill();

ctx.beginPath();
ctx.rect(380, 50, 100, 100);
ctx.fillStyle = "red";
ctx.fill();

fillRect(x, y, w, h)는 내부가 채워진 사각형을 그린다. x, y는 시작점 좌표이고, w는 가로 길이, h는 세로 길이이다. strokeRect()와 rect()도 같은 아규먼트를 받는다.

시작점 좌표는 canvas영역의 왼쪽 모서리로, 0부터 시작한다. 가로 800px, 세로 800px인 canvas는 800 * 800 짜리 모눈종이를 생각하면 편하다.

strokeRect()은 선만 있는 사각형을 그린다.

rect()는 사각형을 그리지만 화면에 나타내는 옵션이 없는 상태다. fill()이나 stroke() 함수로 화면에 나타낸다.

beginPath()는 이전에 그리던 그림과 다른 경로를 구성할 때 사용한다. 예제에서 두 번째 fill() 이전에 fillStyle을 "red"로 초기화했다. 만약 새 경로를 생성하지 않았다면 모든 사각형의 색상이 빨간색으로 칠해진다.

출력

1-3. 선 그리기

moveTo(x, y)와 lineTo(x, y)로 원하는 위치에 선을 그릴 수 있다.

ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.strokeStyle = "red";
ctx.stroke();

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(50, 150);
ctx.strokeStyle = "blue";
ctx.stroke();

선의 시작은 moveTo()로 설정한다. 이후 이어지는 선들은 lineTo()로 그린다.

선으로 그려진 도형도 fill()과 stroke()옵션을 사용할 수 있다.

fill()은 moveTo()와 마지막 lineTo()를 연결한 공간을 도형으로 취급해 채운다.

stroke()는 선으로 나타낸다.

만약 선으로 도형을 완성하려면 마지막 lineTo()를 시작점과 연결해야 뚫리지 않은 도형을 완성할 수 있다.

beginPath()를 사용해 선마다 다른 색으로 설정할 수 있다.

출력

1-4. 원 그리기

ctx.arc(200, 50, 30, 0, 2 * Math.PI);
ctx.fill();

ctx.beginPath();
ctx.arc(250, 50, 30, 0, 1.5 * Math.PI);
ctx.fill();

원은 arc(x, y, radius, startAngle, endAngle)로 그린다.

startAngle과 endAngle는 원을 어디서 그려 어디서 끝낼지 정한다.

arc

w3schools의 이미지를 보면 90도 위치가 0이며 시계 방향으로 증가하는 것을 알 수 있다. startAngle이 0, endAngle이 1.5 * Math.PI라면 90도에서 시작해 상단에 끝난다. 출력의 오른쪽 원이 그 결과물이다. 이런 식으로 시작점과 끝점을 변경할 수 있다.