HTML5의 <canvas> 태그는 스크립트를 이용해 그래픽과 애니메이션 등을 자유롭게 그릴 수 있도록 해주는 HTML5에서 새롭게 도입된 요소입니다. 캔버스 요소는 getContext라는 DOM 메서드를 제공하며, 이 메서드는 렌더링 컨텍스트와 해당 드로잉 함수들을 가져옵니다. 이 함수는 매개변수로 컨텍스트 유형을 하나 받으며, 여기서는 '2d'를 사용합니다.
bezierCurveTo() 메서드란?
HTML5 캔버스에서 베지어 곡선을 그리려면 bezierCurveTo() 메서드를 사용하면 됩니다. 이 메서드는 지정한 좌표점을 현재 경로에 추가하고, 주어진 두 개의 조절점(control point)을 이용해 이전 점과 3차 베지어 곡선(cubic Bezier curve)으로 연결합니다.
매개변수 설명
bezierCurveTo() 메서드에서 x와 y 매개변수는 곡선의 끝점(endpoint) 좌표를 나타냅니다. cp1x, cp1y는 첫 번째 조절점의 좌표이고, cp2x, cp2y는 두 번째 조절점의 좌표입니다. 조절점의 위치에 따라 곡선의 휘어짐 정도와 방향이 결정되므로, 값을 다양하게 바꿔가며 연습해 보면 곡선을 자유자재로 다룰 수 있습니다.
예제 코드
아래 코드를 실행하면 HTML5 캔버스 위에 하트 모양의 베지어 곡선을 그릴 수 있습니다.
<!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,40);
ctx.bezierCurveTo(75,37,70,25,50,25);
ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
ctx.bezierCurveTo(20,80,40,102,75,120);
ctx.bezierCurveTo(110,102,130,80,130,62.5);
ctx.bezierCurveTo(130,62.5,130,25,100,25);
ctx.bezierCurveTo(85,25,75,37,75,40);
ctx.fill();
</script>
</body>
</html>실행 결과
위 코드를 실행하면 여러 개의 베지어 곡선이 연결되어 부드러운 하트 모양 도형이 완성됩니다. 마지막의 fill() 메서드는 경로 내부를 기본 색상(검은색)으로 채워줍니다.
핵심 정리
- getContext('2d')로 2D 렌더링 컨텍스트를 얻습니다.
- beginPath()로 새 경로를 시작합니다.
- moveTo(x, y)로 시작점을 지정합니다.
- bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)로 곡선을 연속적으로 추가합니다.
- fill() 또는 stroke()로 경로를 화면에 렌더링합니다.