HTML5 캔버스(Canvas)에서 베지어 곡선을 그리려면 bezierCurveTo() 메서드를 사용합니다. 이 메서드는 두 개의 제어점(control point)을 이용해 부드러운 곡선을 자유롭게 표현할 수 있어, 일반적인 직선이나 원호보다 훨씬 다양한 형태를 그릴 때 유용합니다.
문법(Syntax)
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
각 매개변수의 의미는 다음과 같습니다.
- cp1x − 첫 번째 베지어 제어점의 x 좌표
- cp1y − 첫 번째 베지어 제어점의 y 좌표
- cp2x − 두 번째 베지어 제어점의 x 좌표
- cp2y − 두 번째 베지어 제어점의 y 좌표
- x − 곡선이 끝나는 지점(끝점)의 x 좌표
- y − 곡선이 끝나는 지점(끝점)의 y 좌표
곡선은 현재 경로의 시작점에서 출발하여 두 개의 제어점에 영향을 받으며 지정된 끝점까지 그려집니다. 따라서 moveTo()로 시작 위치를 먼저 지정한 뒤 호출하는 것이 일반적입니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Tag</title>
</head>
<body>
<canvas id = "newCanvas" width = "550" height = "300" style = "border: 2px solid blue;"></canvas>
<script>
var c = document.getElementById('newCanvas');
var ctx = c.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 20);
ctx.bezierCurveTo(100, 150, 200, 100, 200, 50);
ctx.stroke();
</script>
</body>
</html>코드 설명
getContext('2d')로 2D 드로잉 컨텍스트를 가져옵니다.beginPath()로 새로운 경로를 시작하고,moveTo(50, 20)으로 곡선의 시작점을 설정합니다.bezierCurveTo(100, 150, 200, 100, 200, 50)을 통해 두 개의 제어점에 의해 휘어진 곡선을 그립니다.- 마지막으로
stroke()를 호출해 실제 화면에 곡선을 렌더링합니다.
실행 결과
