HTML5의 canvas 요소는 그림 그리기, 애니메이션 렌더링 등에 사용할 수 있는 요소입니다.
이는 비트맵 이미지를 처리할 수 있는 렌더링 화면을 제공하며, 자바스크립트로 직접 제어하여 다양한 형태의 그래픽을 그릴 수 있게 해줍니다.
이번 포스트에서는 자바스크립트로 canvas에 도형을 그리는 방법을 알아보고, 여러 가지 예제를 통해 그 사용법을 익혀보겠습니다.
Table of Contents
그리기 기본 설정
그림을 그리려면 먼저 HTML에 <canvas> 요소를 생성하고, 자바스크립트로 제어하기위해 getContext(“2d”) 메소드를 사용하여 2D 그래픽을 그릴 환경을 만듭니다.
<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
</script>
캔버스를 자바스크립트로 제어하기 위해 getElementById() 메소드를 사용하여 canvas 변수를 만들었습니다.
위의 코드를 실행하면 아직 화면에는 아무 것도 나타나지 않습니다.
하지만 자바스크립트로 작업하기 위한 변수를 만들었으니 다음 섹션을 확인해 보겠습니다.
사각형 그리기
fillRect(x, y, width, height) 메소드를 사용하면 사각형을 그릴 수 있습니다.
여기서 (x, y)는 사각형의 좌상단 좌표이고, width와 height는 사각형의 크기를 나타냅니다.
<canvas id="myCanvas" width="400" height="250"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = "blue"; // 사각형 색상 지정
ctx.fillRect(50, 50, 150, 100); // 사각형 그리기
</script>
예제를 실행하면 화면에 파란 사각형이 그려진 것을 확인할 수 있습니다.
fillStyle 속성에는 색칠할 색을 지정했습니다.
원 그리기
원은 arc(x, y, radius, startAngle, endAngle) 메서드를 사용하여 그릴 수 있습니다.
x, y는 원의 중심 좌표이고, radius는 반지름, startAngle과 endAngle은 원을 그릴 각도를 설정합니다.
각도는 라디안 단위로 설정됩니다. 예를 들어 0부터 2π까지의 값을 지정하면 원이 그려집니다.
<canvas id="myCanvas" width="400" height="250"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(200, 125, 50, 0, 2 * Math.PI); // 중심 (200, 125), 반지름 50
ctx.fillStyle = "green";
ctx.fill();
</script>
이번 예제에서는 beginPath() 메소드를 호출해 경로 그리기의 시작을 지정했습니다.
다음으로 arc() 메소드로 원의 경로를 지정하고, fill() 메소드로 경로 내의 도형에 지정된 색상을 칠했습니다.
선 그리기
선은 moveTo(x, y)로 시작점을 지정하고, lineTo(x, y)로 선을 이어서 그립니다.
stroke() 메소드를 사용하여 선을 화면에 표시할 수 있습니다.
<canvas id="myCanvas" width="400" height="250"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50); // 시작점
ctx.lineTo(200, 50); // 끝점
ctx.strokeStyle = "red";
ctx.stroke(); // 선 그리기
</script>
이번에도 beginPath() 메소드를 통해 경로 그리기의 시작을 알리고 moveTo(), lineTo() 메소드로 선을 그렸습니다.
지금은 경로 내의 도형을 채우는 것이 아니라 선을 그리는 것이므로 stroke() 메소드로 경로를 칠했습니다.
만약 선을 더 이어 그리고 싶으면 다음과 같이 스크립트를 작성할 수 있습니다.
<canvas id="myCanvas" width="400" height="250"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 50);
ctx.lineTo(100, 70);
ctx.lineTo(200, 80);
ctx.lineTo(100, 100);
ctx.lineTo(300, 150);
ctx.strokeStyle = "red";
ctx.stroke();
</script>
이 방법은 그림판 같은 애플리케이션을 만들 때 사용하는 방법입니다.
사각형과 원 결합하기
여러 도형을 결합하여 복잡한 이미지를 만들 수 있습니다. 예를 들어, 사각형 안에 원을 그려보겠습니다.
<canvas id="myCanvas" width="400" height="250"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = "yellow";
ctx.fillRect(100, 50, 200, 150); // 사각형
ctx.fillStyle = "purple";
ctx.beginPath();
ctx.arc(200, 125, 50, 0, 2 * Math.PI); // 원
ctx.fill();
</script>
ctx 변수의 컨텍스트 속성을 설정하고 fillRect() 메소드를 통해 사각형을 그린 후 다시 경로를 설정하여 fill() 메소드로 원을 그렸습니다.
다각형 그리기
다각형을 그릴 때는 moveTo()와 lineTo()를 반복하여 각 꼭짓점을 연결한 후, closePath()로 마지막 점을 시작점과 연결해 닫습니다.
<canvas id="myCanvas" width="400" height="250"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(150, 50); // 첫 번째 점
ctx.lineTo(250, 50); // 두 번째 점
ctx.lineTo(300, 150); // 세 번째 점
ctx.lineTo(200, 250); // 네 번째 점
ctx.lineTo(100, 150); // 다섯 번째 점
ctx.closePath();
ctx.fillStyle = "orange";
ctx.fill();
</script>
기본적으로 경로를 채워 색칠하려면 닫힌 경로여야 합니다.
위의 예제에서 다섯 번째 점을 그리고 lineTo() 메소드를 이용해 첫 번째 점의 좌표를 입력해 경로를 닫을 수도 있지만 closePath() 메소드를 사용하면 자동으로 시작점의 좌표로 경로를 닫아줍니다.