TIL-2024.04.21 - Canvas - 003 - Canvas 곡선 그리기

 

 

 

질문

1. Canvas에서 곡선은 어떻게 그릴 수있어 ? 

 

 

 

경로(Path) 그리기

- Canvas에서는 경로(Path)를 사용하여 여러 도형을 그리고, 곡선을 그림

- Canvas에서 경로(Path)를 그리는 과정은

     > beginPath() : 새로운 경로(path)를 시작할 때 호출하는 메서드
     > 그리기 명령(moveTo(), lineTo(), arc(), quadraticCurveTo(), bezierCurveTo() 등)
     > 그리기 스타일 설정(stroke() 또는 fill())

의 순서로 이뤄짐.

 

 

예제:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 경로 그리기 시작
ctx.beginPath();

// 직선 그리기
ctx.moveTo(50, 50); // 시작점
ctx.lineTo(150, 50); // 선 그리기

// 곡선 그리기 (베지어 곡선)
ctx.quadraticCurveTo(200, 50, 200, 100); // 제어점, 끝점
ctx.bezierCurveTo(200, 150, 300, 150, 300, 100); // 제어점1, 제어점2, 끝점

// 원 그리기
ctx.arc(200, 100, 30, 0, Math.PI * 2); // (x, y, radius, startAngle, endAngle)

// 경로 그리기 스타일 설정
ctx.fillStyle = 'lightblue';
ctx.fill(); // 내부를 색으로 채우기

 

 

 

 

 

- 위 코드에서 beginPath()로 새로운 경로를 시작하고, moveTo()로 시작점을 설정.

- lineTo()로 직선을 그리고, quadraticCurveTo()와 bezierCurveTo()로 곡선을 그림.

- 마지막으로 arc()로 원을 그린 후 fill()로 내부를 색으로 채움.

 

 

 

곡선 그리기 (베지어 곡선 등)

- Canvas에서는 다양한 곡선을 그릴 수 있음.

- 시작점과 끝점 사이를 부드럽게 연결하는 곡선으로, 제어점(control point)을 이용하여 곡선의 형태를 조절

• quadraticCurveTo(cp1x, cp1y, x, y):
  - 제어점(cp1x, cp1y)과 끝점(x, y)을 지정하여 2차 베지어 곡선을 그림.
  
  
• bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y):
  - 제어점 2개(cp1x, cp1y, cp2x, cp2y)와 끝점(x, y)을 지정하여 3차 베지어 곡선을 그림.

 

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 베지어 곡선 그리기
ctx.beginPath();
ctx.moveTo(50, 50); // 시작점
ctx.bezierCurveTo(100, 100, 150, 0, 200, 50); // 제어점1, 제어점2, 끝점
ctx.strokeStyle = 'white';
ctx.lineWidth = 2;
ctx.stroke(); // 곡선 그리기

 

 

 

 

 

- bezierCurveTo() 메서드를 사용하여 제어점 2개와 끝점을 지정하여 곡선을 그림.

- 그 후 stroke()로 곡선을 실제로 그림.

- Canvas를 활용하여 경로와 곡선을 그리면서 다양한 그래픽 효과를 구현.

- 베지어 곡선을 조절하여 부드러운 곡선을 그리거나, 다양한 경로를 이용하여 복잡한 도형을 그림.