HTML에서 사각형을 그리려면 canvas 요소를 사용합니다. 캔버스에서는 rect() 메서드를 이용해 일반적인 직각 사각형을 손쉽게 그릴 수 있습니다.
하지만 모서리가 둥근 사각형(rounded rectangle)을 만들 때는 rect() 메서드만으로는 구현할 수 없습니다. 대신 lineTo() 메서드로 직선 부분을 그리고, quadraticCurveTo() 메서드로 둥근 모서리(곡선)를 그려주는 방식을 활용해야 합니다.
HTML5로 캔버스 생성하기
먼저 HTML5 문서에 캔버스를 만드는 기본 코드는 다음과 같습니다.
<!DOCTYPE HTML>
<html>
<head>
<title>HTML5 Canvas Tag</title>
</head>
<body>
<canvas id="newCanvas" width="300" height="150"></canvas>
</body>
</html>캔버스가 준비되었다면, 자바스크립트를 이용해 둥근 사각형을 그리는 방법을 살펴보겠습니다.
둥근 사각형 그리기 예제
아래 예제에서는 네 개의 모서리마다 quadraticCurveTo()를 호출하여 곡선을 만들고, 각 변은 lineTo()로 연결하는 방식으로 둥근 사각형을 완성합니다.
<!DOCTYPE HTML>
<html>
<head>
<title>HTML5 Canvas Tag</title>
</head>
<body>
<canvas id="newCanvas" width="300" height="150"></canvas>
<script>
var canvas = document.getElementById('newCanvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(20, 10);
ctx.lineTo(80, 10);
ctx.quadraticCurveTo(90, 10, 90, 20);
ctx.lineTo(90, 80);
ctx.quadraticCurveTo(90, 90, 80, 90);
ctx.lineTo(20, 90);
ctx.quadraticCurveTo(10, 90, 10, 80);
ctx.lineTo(10, 20);
ctx.quadraticCurveTo(10, 10, 20, 10);
ctx.stroke();
</script>
</body>
</html>코드 동작 원리
- moveTo(x, y): 경로의 시작점을 지정합니다. 여기서는 좌측 상단 곡선이 시작되는 지점입니다.
- lineTo(x, y): 현재 위치에서 지정한 좌표까지 직선을 그립니다. 사각형의 네 변을 담당합니다.
- quadraticCurveTo(cx, cy, x, y): 제어점(cx, cy)을 기준으로 끝점(x, y)까지 부드러운 곡선을 그려 둥근 모서리를 표현합니다.
- stroke(): 정의된 경로를 실제 화면에 선으로 렌더링합니다.
실행 결과
위 코드를 실행하면 네 모서리가 부드럽게 처리된 둥근 사각형이 캔버스에 출력됩니다.
