캔버스에 곡선 커브를 그리는 방법 및 예제보기

Last Modified : 2020-08-10 / Created : 2018-06-17

9,756
View Count

주소 복사하기

얼마 전 캔버스(canvas)를 사용하여 원을 그리는 방법을 알아보았습니다. 이번에는 원이 아닌 캔버스에 곡선을 그리는 방법에 대하여도 알아보려고 합니다. 어떻게 하면 부드러운 곡선을 그릴 수 있을까요?

# 캔버스(canvas)에 원을 그리는 방법

canvas 요소에 원을 그리는 방법은 크게 세 가지를 사용할 수 있습니다. 구분해보면...

1. arc() // 원을 그리거나 곡선을 그릴 수 있음
2. arcTo() // 커브를 그리는 데 사용 가능
3. benzierCurveTo() // 베지에 커브를 사용하여 부드럽게 연결

arc()는 원을 그리는 방법으로 이미 알아보았죠? 하지만 arc()를 사용할 때 원을 전체를 그리는 것이 아니라 일부까지만 연결한다면? 이 경우 곡선을 그릴 수 있습니다.

arc()를 사용하여 원 그리기 바로가기 >
https://webisfree.com/2018-06-07/[html5]-캔버스(canvas)에-원-그리기

오늘 알아볼 방법은 1번을 제외한 2번 그리고 3번 방법입니다. 2번의 arcTo()는 두 점 사이를 원을 사용하여 연결하는 방법입니다. 3번인 bezier curve는 잘 알려진 방법으로 자주 사용되는 방법이죠. 베지에 커브는 곡선을 부드럽게 만들어 주는 방법입니다. 먼저 arcTo()를 알아봅니다.

! arcTo()를 사용하여 원 그리기

arcTo()는 시작점부터 특정 위치까지를 연결하는 곡선을 그릴 수 있습니다. 테두리를 둥글게 만들 경우... 예들들어 css의 border-radius 속성을 사용하는 것처럼 구현할 수 있죠. 이때 arcTo()는 다음과 같이 사용합니다.

arcTo(x1, y1, x2, y2, radius)

x1 - 시작점을 지나는(연장하는) 첫 번째 x 위치
y1 - 시작점을 지나는(연장하는) 첫 번째 y 위치
x2 - 원의 기준이 되는 두 번째 x 위치
y2 - 원의 기준이 되는 두 번째 y 위치

그럼 아래에서 간단한 예제를 함께 알아보겠습니다.

! arcTo()를 사용한 곡선 그리기 예제보기

이번 예제는 200, 200 크기의 캔버스 위에 다음과 같이 설정된 값을 가지는 곡선을 그려보려합니다.

시작위치 x : 50
시작위치 y : 50
두번째 x : 150
두번째 y : 150
반지름 : 100

@ canvas1.html

@ canvas1.js

var canvas = document.querySelector('#canvas1');
var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.arcTo(150, 50, 150, 150, 100);
ctx.stroke();

위 예제를 실행하면 아래와 같이 나타납니다.

두 점을 원처럼 둥글게 연결한 모습니다. 이처럼 단독으로 사용하기 보다는 선과 함께 사용합니다. 아래는 선과 함께 사용한 다른 예제입니다.

! arcTo() 선과 함께 사용한 예제보기

이번 예제는 둥근 사각형.. css의 border-radius를 사용한 것 처럼 그려보도록 하겠습니다.

아래는 스크립트 코드입니다.

var canvas = document.querySelector('#canvas2');
var ctx = canvas.getContext('2d');
ctx.moveTo(20, 20);
ctx.lineTo(150, 20);
ctx.arcTo(170, 20, 170, 40, 20);
ctx.lineTo(170, 80);
ctx.stroke();

위 예제를 실행하면 아래와 같이 결과가 나타나게됩니다.

이와같이 부드러운 테두리 효과를 만들때도 arcTo()를 사용할 수 있을 것입니다. 여기까지 arcTo() 예제를 알아보았는데요 그럼 다음은 베지에 커브를 알아보겠습니다.

# bezierCurveTo()를 사용한 베지에 커브, 곡선 그리는 방법

베지에 커브를 사용할 경우 두 개의 선을 부드럽게 연결한다고 생각하면 됩니다. 먼저 시작점과 종료점이 필요하고 이 두 점을 곡선으로 표현해줄 두 개의 위치가 필요합니다. 이를 커브점이라고 표현하면 아래와 같이 사용합니다.

context.bezierCurveTo(cx1, cy1, cx2, cy2, x2, y2)

시작점이 x, y라면 커브점1은 cx1, cy1 그리고 종료점은 x2, y2... 마지막으로 커브점2가 cx2, cy2로 나타낼 것입니다.

! bezierCurveTo() 예제보기

아래 예제는 베지에 커브(bezier curve)를 사용하여 두 점 사이에 간단하게 부드러운 곡선을 만들어봅니다.

시작점 x, y - 20, 20
종료점 x, y - 180, 20
커브점1 x, y - 20, 130
커브점2 x, y - 180, 130

위의 경우 이를 코드로 나타내면 아래처럼 스크립트 코드를 사용하게 됩니다.

@ bezierCurve.js

var canvas = document.querySelector('#canvas3');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.bezierCurveTo(20, 130, 180, 130, 180, 20);
ctx.stroke();

아래는 위 코드를 실행할 경우 나타나는 모습입니다.

그럼 한 가지 예제를 더 볼까요?

이번 예제는 위 예제에서 두번째 커브점과 종료점을 바뀌어 보았습니다. 이 경우 어떻게 나타나는지 보세요.

var canvas = document.querySelector('#canvas3');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.bezierCurveTo(20, 130, 180, 20, 180, 130);
ctx.stroke();

위 코드를 실행하면 아래와 같이 나타나게 됩니다.

여기까지 bezierCurveTo()를 사용하여 베지에 커브를 그리는 예제까지 알아보았습니다. 이처럼 canvas 태그에 간단하게 곡선을 그릴 수 있습니다.