HTML Canvas – 방사형 그라디언트

HTML Canvas 방사형 그라데이션

HTML Canvas에서 방사형 그라데이션(radial gradient)은 중심점에서 바깥쪽으로 원형으로 색상이 전환되는 효과를 만든다. createRadialGradient() 메서드를 사용하여 구현할 수 있다.

방사형 그라데이션 기본 문법

방사형 그라데이션을 만들기 위해서는 다음 단계를 따른다.

1. createRadialGradient() 메서드로 그라데이션 객체를 생성한다
2. addColorStop() 메서드로 색상 중지점을 추가한다
3. fillStyle 또는 strokeStyle에 그라데이션을 설정한다

var gradient = ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);

기본 방사형 그라데이션

가장 간단한 방사형 그라데이션은 중심에서 바깥쪽으로 색상이 변하는 형태이다.

<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.createRadialGradient(150, 75, 10, 150, 75, 100);

  gradient.addColorStop(0, "red");

  gradient.addColorStop(1, "yellow");

  ctx.fillStyle = gradient;

  ctx.fillRect(20, 20, 260, 110);

</script>

이 예제는 중심이 빨간색이고 바깥쪽이 노란색인 방사형 그라데이션을 만든다. 시작 원과 끝 원의 중심이 같은 위치에 있어 동심원 형태의 그라데이션이 생성된다.

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

addColorStop() 메서드를 여러 번 사용하여 다양한 색상 전환을 만들 수 있다.

<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.createRadialGradient(150, 75, 5, 150, 75, 100);

  gradient.addColorStop(0, "white");

  gradient.addColorStop(0.4, "yellow");

  gradient.addColorStop(0.7, "orange");

  gradient.addColorStop(1, "red");

  ctx.fillStyle = gradient;

  ctx.fillRect(20, 20, 260, 110);

</script>

이 예제는 중심에서 바깥쪽으로 흰색, 노란색, 오렌지색, 빨간색 순으로 변하는 4단계 방사형 그라데이션을 만든다.

원형 도형에 방사형 그라데이션 적용

방사형 그라데이션은 원형 도형과 특히 잘 어울린다.

<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, 10, 150, 75, 70);

  gradient.addColorStop(0, "white");

  gradient.addColorStop(1, "blue");

  ctx.beginPath();

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

  ctx.fillStyle = gradient;

  ctx.fill();

</script>

이 예제는 중심이 흰색이고 가장자리가 파란색인 원을 그린다. 3D 구체 효과를 연출할 수 있다.

비대칭 방사형 그라데이션

시작 원과 끝 원의 중심을 다르게 설정하면 비대칭적인 그라데이션 효과를 만들 수 있다.

<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(100, 50, 10, 200, 100, 80);

  gradient.addColorStop(0, "yellow");

  gradient.addColorStop(1, "green");

  ctx.fillStyle = gradient;

  ctx.fillRect(20, 20, 260, 110);

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

  ctx.fillStyle = "black";

  ctx.fillRect(0, 0, 300, 150);

  var gradient = ctx.createRadialGradient(150, 75, 0, 150, 75, 80);

  gradient.addColorStop(0, "rgba(255, 255, 255, 1)");

  gradient.addColorStop(0.5, "rgba(255, 255, 255, 0.5)");

  gradient.addColorStop(1, "rgba(255, 255, 255, 0)");

  ctx.fillStyle = gradient;

  ctx.fillRect(0, 0, 300, 150);

</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 positions = [{x: 75, y: 50}, {x: 225, y: 50}, {x: 150, y: 100}];

  var colors = ["red", "green", "blue"];

  for (var i = 0; i < positions.length; i++) {
    var gradient = ctx.createRadialGradient(positions[i].x, positions[i].y, 0, positions[i].x, positions[i].y, 40);
    gradient.addColorStop(0, colors[i]);
    gradient.addColorStop(1, "transparent");
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, 300, 150);
  }
</script>[/code]



이 예제는 세 개의 서로 다른 색상을 가진 방사형 그라데이션을 겹쳐서 복합적인 색상 효과를 만든다.
태양 효과 만들기
방사형 그라데이션으로 태양과 같은 자연스러운 발광 효과를 구현할 수 있다.
[code lang="markup"]<canvas id="myCanvas7" width="300" height="150" style="border:1px solid #d3d3d3;">

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

</canvas>

<script>

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

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

  ctx.fillStyle = "navy";

  ctx.fillRect(0, 0, 300, 150);

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

  gradient.addColorStop(0, "white");

  gradient.addColorStop(0.2, "yellow");

  gradient.addColorStop(0.4, "orange");

  gradient.addColorStop(0.7, "red");

  gradient.addColorStop(1, "rgba(255, 0, 0, 0)");

  ctx.beginPath();

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

  ctx.fillStyle = gradient;

  ctx.fill();

</script>

이 예제는 어두운 배경에 태양과 같은 발광 효과를 가진 원을 그린다. 중심에서 바깥쪽으로 흰색, 노란색, 오렌지색, 빨간색 순으로 변하며 가장자리는 투명해진다.

💡 방사형 그라데이션 팁:
• 시작 원과 끝 원의 중심을 같게 하면 동심원 형태의 그라데이션이 된다
• 투명도(rgba)를 활용하면 더 자연스러운 조명 효과를 만들 수 있다
• 여러 방사형 그라데이션을 겹치면 복잡하고 아름다운 패턴을 만들 수 있다

그라데이션 텍스트 효과

방사형 그라데이션을 텍스트에 적용하여 특별한 효과를 만들 수 있다.

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

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

</canvas>

<script>

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

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

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

  gradient.addColorStop(0, "gold");

  gradient.addColorStop(0.5, "orange");

  gradient.addColorStop(1, "red");

  ctx.font = "40px Arial";

  ctx.fillStyle = gradient;

  ctx.textAlign = "center";

  ctx.fillText("RADIAL", 150, 90);

</script>

이 예제는 방사형 그라데이션을 텍스트에 적용하여 중심에서 바깥쪽으로 색상이 변하는 텍스트 효과를 만든다.

방사형 그라데이션은 Canvas에서 매우 강력한 시각적 효과를 만들 수 있는 도구이다. 조명, 발광, 3D 효과 등 다양한 그래픽 표현이 가능하다.