HTML Canvas – 그라디언트

HTML Canvas 그라데이션

HTML Canvas에서는 그라데이션(gradient) 기능을 이용해 부드럽게 색상이 전환되는 효과를 만들 수 있다. 대표적으로 선형(linear)과 방사형(radial) 두 가지 그라데이션이 있다.

그라데이션 종류

• 선형 그라데이션 (Linear Gradient)
• 방사형 그라데이션 (Radial Gradient)

선형 그라데이션

createLinearGradient(x0, y0, x1, y1) 함수로 선형 그라데이션 객체를 만든다. addColorStop(offset, color)로 색상 전환 지점을 추가할 수 있다.

기본 선형 그라데이션 예제

<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");

  var gradient = ctx.createLinearGradient(0, 0, 300, 0);

  gradient.addColorStop(0, "red");

  gradient.addColorStop(1, "yellow");

  ctx.fillStyle = gradient;

  ctx.fillRect(10, 10, 280, 130);

</script>

이 예제는 왼쪽부터 오른쪽으로 빨간색에서 노란색으로 변하는 선형 그라데이션을 적용한 사각형을 그린다.

여러 색상으로 선형 그라데이션

<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");

  var gradient = ctx.createLinearGradient(0, 0, 300, 0);

  gradient.addColorStop(0, "magenta");

  gradient.addColorStop(0.5, "blue");

  gradient.addColorStop(1, "red");

  ctx.fillStyle = gradient;

  ctx.fillRect(10, 10, 280, 130);

</script>

이 예제는 세 가지 색상(마젠타, 파랑, 빨강)으로 점진적으로 전환되는 선형 그라데이션을 적용한다.

방사형 그라데이션

createRadialGradient(x0, y0, r0, x1, y1, r1) 함수로 방사형 그라데이션 객체를 만든다. 중심과 반지름을 지정해 원형으로 색이 번진다.

기본 방사형 그라데이션 예제

<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");

  var gradient = ctx.createRadialGradient(150, 75, 20, 150, 75, 100);

  gradient.addColorStop(0, "red");

  gradient.addColorStop(1, "white");

  ctx.fillStyle = gradient;

  ctx.fillRect(10, 10, 280, 130);

</script>

이 예제는 중심에서 바깥쪽으로 빨간색에서 흰색으로 변하는 방사형 그라데이션 효과를 만든다.

여러 색상으로 방사형 그라데이션

<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");

  var gradient = ctx.createRadialGradient(150, 75, 10, 150, 75, 100);

  gradient.addColorStop(0, "yellow");

  gradient.addColorStop(0.5, "green");

  gradient.addColorStop(1, "blue");

  ctx.fillStyle = gradient;

  ctx.fillRect(10, 10, 280, 130);

</script>

이 예제는 노랑, 초록, 파랑 세 가지 색상이 부드럽게 전환되는 방사형 그라데이션을 적용한다.

그라데이션과 도형 결합

그라데이션은 텍스트, 원, 선 등 다양한 도형과 결합하여 사용할 수 있다.

그라데이션 텍스트

<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");

  var gradient = ctx.createLinearGradient(0, 0, 300, 0);

  gradient.addColorStop(0, "magenta");

  gradient.addColorStop(0.5, "blue");

  gradient.addColorStop(1, "red");

  ctx.font = "40px Arial";

  ctx.fillStyle = gradient;

  ctx.fillText("Gradient", 30, 90);

</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");

  var gradient = ctx.createRadialGradient(150, 75, 10, 150, 75, 70);

  gradient.addColorStop(0, "white");

  gradient.addColorStop(1, "blue");

  ctx.beginPath();

  ctx.arc(150, 75, 50, 0, 2 * Math.PI);

  ctx.fillStyle = gradient;

  ctx.fill();

</script>

이 예제는 중심이 흰색, 바깥이 파란색인 방사형 그라데이션으로 채워진 원을 그린다.

💡 그라데이션 팁:
• addColorStop의 offset 값은 0(시작)부터 1(끝) 사이에서 자유롭게 지정할 수 있다
• 그라데이션으로 다양한 도형과 텍스트에 색상 효과를 줄 수 있다
• 선형과 방사형 그라데이션을 조합하면 독창적인 그래픽을 만들 수 있다

Canvas 그라데이션 기능은 색상 전환 효과를 매우 쉽게 구현할 수 있다. 다양한 도형과 결합해 시각적 완성도를 높일 수 있다.