HTML5 Canvas로 베지어 곡선 그리기
HTML5 캔버스(Canvas)에서 베지어 곡선(Bezier Curve)을 그리려면 bezierCurveTo() 메서드를 사용하면 됩니다. 이 메서드는 두 개의 제어점(control point)과 하나의 끝점(end point)을 기준으로, 현재 경로의 마지막 지점에서 지정한 좌표까지 부드러운 3차 곡선(cubic curve)을 그려 줍니다.
bezierCurveTo() 메서드 문법
context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
- cp1x, cp1y : 첫 번째 제어점의 x, y 좌표
- cp2x, cp2y : 두 번째 제어점의 x, y 좌표
- x, y : 곡선이 끝나는 지점의 x, y 좌표
곡선의 시작점은 moveTo()로 지정한 좌표 또는 이전 경로의 마지막 좌표가 되며, 제어점의 위치에 따라 곡선이 휘어지는 방향과 정도가 결정됩니다. 여러 개의 베지어 곡선을 연속으로 연결하면 자유로운 형태의 복잡한 도형도 표현할 수 있습니다.
예제: 하트 모양 그리기
다음 코드는 여러 개의 베지어 곡선을 연결하여 캔버스 위에 하트 모양을 그리는 예제입니다. 직접 실행해 보세요.
<!DOCTYPE HTML>
<html>
<head>
<style>
#test {
width: 100px;
height: 100px;
margin: 0px auto;
}
</style>
<script>
function drawShape() {
// DOM을 통해 캔버스 요소 가져오기
var canvas = document.getElementById('mycanvas');
// 캔버스를 지원하는 경우에만 실행
if (canvas.getContext) {
// getContext()로 2D 드로잉 컨텍스트 얻기
var ctx = canvas.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();
} else {
alert('캔버스를 지원하는 최신 브라우저에서 확인해 주세요.');
}
}
</script>
</head>
<body id="test" onload="drawShape();">
<canvas id="mycanvas"></canvas>
</body>
</html>실행 결과
위 코드를 브라우저에서 실행하면 페이지가 로드되는 순간 drawShape() 함수가 호출되어, 아래 이미지와 같이 하트 모양의 베지어 곡선이 캔버스에 그려집니다.
