HTML5의 <canvas> 태그는 자바스크립트 같은 스크립트 언어를 사용해 그래픽과 애니메이션을 직접 그릴 수 있게 해주는 요소입니다. HTML5에서 새롭게 도입된 이 태그는 getContext()라는 DOM 메서드를 제공하며, 이 메서드를 호출하면 렌더링 컨텍스트와 다양한 드로잉 함수에 접근할 수 있습니다. 이때 매개변수로 컨텍스트 타입인 '2d'를 전달합니다.
이차 곡선(Quadratic Curve)이란?
HTML5 캔버스에서 이차 곡선을 그리려면 quadraticCurveTo() 메서드를 사용합니다. 이 메서드는 지정한 좌표점을 현재 경로(path)에 추가하면서, 주어진 제어점(control point)을 기준으로 이전 좌표점과 새 좌표점을 연결하는 2차 베지어 곡선(quadratic Bezier curve)을 생성합니다.
quadraticCurveTo() 메서드의 매개변수
- cpx, cpy: 곡선의 휘어짐 방향을 결정하는 제어점(control point)의 x, y 좌표
- x, y: 곡선이 도달하는 끝점(endpoint)의 x, y 좌표
즉, 곡선은 시작점에서 출발해 제어점을 향해 휘어진 뒤 끝점에 도착하지만, 실제로 제어점을 지나가지는 않습니다. 제어점은 마치 자석처럼 곡선을 끌어당기는 역할만 합니다.
예제 코드
아래 코드를 실행하면 HTML5 캔버스 위에 이차 곡선으로 만든 하트 모양을 확인할 수 있습니다. 여러 개의 quadraticCurveTo() 호출을 연결해 부드러운 곡선 형태를 완성했습니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Tag</title>
</head>
<body>
<canvas id="newCanvas" width="500" height="300" style="border:1px
solid #000000;"></canvas>
<script>
var c = document.getElementById('newCanvas');
var ctx = c.getContext('2d');
// 도형 그리기
ctx.beginPath();
ctx.moveTo(75,25);
ctx.quadraticCurveTo(25,25,25,62.5);
ctx.quadraticCurveTo(25,100,50,100);
ctx.quadraticCurveTo(50,120,30,125);
ctx.quadraticCurveTo(60,120,65,100);
ctx.quadraticCurveTo(125,100,125,62.5);
ctx.quadraticCurveTo(125,25,75,25);
ctx.stroke();
</script>
</body>
</html>코드 설명
getContext('2d')로 2D 렌더링 컨텍스트를 가져옵니다.beginPath()로 새로운 경로를 시작합니다.moveTo(75, 25)로 곡선의 시작점을 지정합니다.quadraticCurveTo()를 반복 호출하며 각 구간마다 제어점과 끝점을 설정해 부드러운 곡선을 이어 그립니다.stroke()로 경로를 실제 화면에 렌더링합니다.
실행 결과
위 코드를 실행하면 캔버스 안에 여러 개의 이차 베지어 곡선이 연결되어 자연스러운 곡선 도형이 그려지는 것을 확인할 수 있습니다. 제어점의 위치를 조금씩 바꿔가며 실험해 보면 곡선이 어떻게 변화하는지 직관적으로 이해하는 데 큰 도움이 됩니다.