HTML Canvas – 곡선

HTML Canvas 곡선 그리기

HTML Canvas는 곡선을 그릴 수 있는 여러 메서드를 제공한다. 대표적으로 2차 곡선(quadratic curve)과 3차 곡선(bezier curve)이 있다.

2차 곡선: quadraticCurveTo()

quadraticCurveTo() 메서드는 시작점, 제어점, 끝점을 이용해 2차 곡선을 그린다.

context.quadraticCurveTo(cpx, cpy, x, y);

기본 2차 곡선 그리기

<canvas id="myCanvas1" width="300" height="150" style="border:1px solid #d3d3d3;">

  브라우저가 HTML5 Canvas를 지원하지 않습니다.

</canvas>

<script>

  var c = document.getElementById("myCanvas1");

  var ctx = c.getContext("2d");

  ctx.beginPath();

  ctx.moveTo(50, 100);

  ctx.quadraticCurveTo(150, 10, 250, 100);

  ctx.stroke();

</script>

이 예제는 (50,100)에서 시작해 (250,100)에서 끝나는 2차 곡선을 그린다. 제어점 (150,10)이 곡선의 굽힘을 결정한다.

여러 개의 2차 곡선 연결

<canvas id="myCanvas2" width="300" height="150" style="border:1px solid #d3d3d3;">

  브라우저가 HTML5 Canvas를 지원하지 않습니다.

</canvas>

<script>

  var c = document.getElementById("myCanvas2");

  var ctx = c.getContext("2d");

  ctx.beginPath();

  ctx.moveTo(20, 140);

  ctx.quadraticCurveTo(60, 10, 120, 140);

  ctx.quadraticCurveTo(180, 10, 240, 140);

  ctx.stroke();

</script>

이 예제는 두 개의 2차 곡선을 연결해서 파도처럼 이어지는 곡선을 만든다.

3차 곡선: bezierCurveTo()

bezierCurveTo() 메서드는 두 개의 제어점과 끝점을 사용해 3차 곡선을 그린다.

context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);

기본 3차 곡선 그리기

<canvas id="myCanvas3" width="300" height="150" style="border:1px solid #d3d3d3;">

  브라우저가 HTML5 Canvas를 지원하지 않습니다.

</canvas>

<script>

  var c = document.getElementById("myCanvas3");

  var ctx = c.getContext("2d");

  ctx.beginPath();

  ctx.moveTo(20, 80);

  ctx.bezierCurveTo(100, 10, 200, 150, 280, 70);

  ctx.stroke();

</script>

이 코드는 (20,80)에서 시작해 (280,70)에서 끝나는 3차 곡선을 그린다. 두 제어점 (100,10), (200,150)이 곡선의 형태를 만든다.

여러 개의 3차 곡선 연결

<canvas id="myCanvas4" width="300" height="150" style="border:1px solid #d3d3d3;">

  브라우저가 HTML5 Canvas를 지원하지 않습니다.

</canvas>

<script>

  var c = document.getElementById("myCanvas4");

  var ctx = c.getContext("2d");

  ctx.beginPath();

  ctx.moveTo(20, 70);

  ctx.bezierCurveTo(50, 10, 100, 140, 150, 70);

  ctx.bezierCurveTo(200, 0, 250, 140, 280, 70);

  ctx.stroke();

</script>

이 예제는 두 개의 3차 곡선을 연결해서 더욱 복잡하고 부드러운 곡선을 만든다.

곡선과 직선을 혼합한 도형

곡선과 직선을 조합해서 다양한 도형을 만들 수 있다.

<canvas id="myCanvas5" width="300" height="150" style="border:1px solid #d3d3d3;">

  브라우저가 HTML5 Canvas를 지원하지 않습니다.

</canvas>

<script>

  var c = document.getElementById("myCanvas5");

  var ctx = c.getContext("2d");

  ctx.beginPath();

  ctx.moveTo(50, 100);

  ctx.quadraticCurveTo(150, 10, 250, 100);

  ctx.lineTo(250, 140);

  ctx.lineTo(50, 140);

  ctx.closePath();

  ctx.fillStyle = "orange";

  ctx.fill();

  ctx.strokeStyle = "black";

  ctx.stroke();

</script>

이 예제는 위쪽이 곡선이고 아래쪽은 직선인 닫힌 도형을 만들고, 내부를 오렌지색으로 채운다.

곡선으로 만든 하트 모양

여러 개의 곡선을 조합하면 복잡한 하트 모양도 그릴 수 있다.

<canvas id="myCanvas6" width="300" height="150" style="border:1px solid #d3d3d3;">

  브라우저가 HTML5 Canvas를 지원하지 않습니다.

</canvas>

<script>

  var c = document.getElementById("myCanvas6");

  var ctx = c.getContext("2d");

  ctx.beginPath();

  ctx.moveTo(150, 100);

  ctx.bezierCurveTo(150, 80, 120, 80, 120, 100);

  ctx.bezierCurveTo(120, 120, 150, 130, 150, 140);

  ctx.bezierCurveTo(150, 130, 180, 120, 180, 100);

  ctx.bezierCurveTo(180, 80, 150, 80, 150, 100);

  ctx.fillStyle = "pink";

  ctx.fill();

  ctx.strokeStyle = "red";

  ctx.stroke();

</script>

이 코드는 여러 개의 bezierCurveTo() 호출로 하트 모양을 그리고, 내부를 분홍색으로 채운다.

💡 곡선 그리기 팁:
• 곡선의 형태는 제어점의 위치에 크게 영향을 받는다
• 곡선을 그릴 때는 항상 beginPath()로 경로를 시작하고, moveTo()로 시작점을 지정하자
• 여러 곡선을 연결할 때는 각 곡선의 끝점이 다음 곡선의 시작점이 된다

Canvas 곡선 그리기를 활용하면 복잡한 패턴과 부드러운 도형을 쉽게 만들 수 있다. 곡선 함수의 매개변수를 실험하며 다양한 시각적 효과를 직접 구현해보자.