HTML Canvas – 그림자

HTML Canvas 그림자

HTML Canvas에서는 그림자 효과를 사용하여 텍스트와 도형에 깊이감과 입체감을 줄 수 있다. 그림자는 shadowColor, shadowBlur, shadowOffsetX, shadowOffsetY 속성을 통해 제어할 수 있다.

그림자 속성

Canvas에서 그림자를 만들기 위해 사용하는 네 가지 주요 속성이 있다.

속성	설명
shadowColor	그림자의 색상을 설정한다
shadowBlur	그림자의 흐림 정도를 설정한다 (0 = 선명, 높을수록 흐림)
shadowOffsetX	그림자의 수평 이동 거리를 설정한다
shadowOffsetY	그림자의 수직 이동 거리를 설정한다

기본 텍스트 그림자

텍스트에 간단한 그림자 효과를 적용해보자.

<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.font = "30px Arial";

  ctx.shadowColor = "gray";

  ctx.shadowOffsetX = 2;

  ctx.shadowOffsetY = 2;

  ctx.fillText("Shadow Text", 20, 80);

</script>

이 예제는 회색 그림자가 오른쪽 아래로 2픽셀씩 이동된 텍스트를 만든다.

흐린 그림자 효과

shadowBlur 속성을 사용하여 그림자에 흐림 효과를 줄 수 있다.

<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.font = "30px Arial";

  ctx.shadowColor = "black";

  ctx.shadowBlur = 10;

  ctx.shadowOffsetX = 5;

  ctx.shadowOffsetY = 5;

  ctx.fillStyle = "blue";

  ctx.fillText("Blurred Shadow", 20, 80);

</script>

이 예제는 10픽셀의 흐림 효과가 적용된 검은색 그림자를 가진 파란색 텍스트를 만든다.

도형에 그림자 적용

그림자는 텍스트뿐만 아니라 모든 도형에도 적용할 수 있다.

<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.shadowColor = "rgba(0, 0, 0, 0.5)";

  ctx.shadowBlur = 15;

  ctx.shadowOffsetX = 10;

  ctx.shadowOffsetY = 10;

  ctx.fillStyle = "red";

  ctx.fillRect(50, 30, 100, 80);

</script>

이 예제는 반투명 검은색 그림자가 있는 빨간색 사각형을 그린다. RGBA를 사용하여 그림자의 투명도를 조절할 수 있다.

원형 도형 그림자

원형 도형에도 그림자 효과를 적용할 수 있다.

<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.shadowColor = "blue";

  ctx.shadowBlur = 20;

  ctx.shadowOffsetX = 0;

  ctx.shadowOffsetY = 0;

  ctx.fillStyle = "yellow";

  ctx.beginPath();

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

  ctx.fill();

</script>

이 예제는 파란색 발광 효과처럼 보이는 그림자를 가진 노란색 원을 만든다. offset이 0이므로 그림자가 원 주변으로 고르게 퍼진다.

다양한 그림자 색상

그림자 색상을 다양하게 설정하여 다른 효과를 만들 수 있다.

<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.font = "20px Arial";

  ctx.shadowBlur = 8;

  ctx.shadowOffsetX = 3;

  ctx.shadowOffsetY = 3;

  ctx.shadowColor = "red";

  ctx.fillStyle = "white";

  ctx.fillText("Red Shadow", 20, 40);

  ctx.shadowColor = "green";

  ctx.fillText("Green Shadow", 20, 80);

  ctx.shadowColor = "blue";

  ctx.fillText("Blue Shadow", 20, 120);

</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.font = "20px Arial";

  ctx.shadowColor = "black";

  ctx.shadowBlur = 5;

  ctx.shadowOffsetX = 3;

  ctx.shadowOffsetY = 3;

  ctx.fillText("With Shadow", 20, 40);

  ctx.shadowColor = "transparent";

  ctx.shadowBlur = 0;

  ctx.shadowOffsetX = 0;

  ctx.shadowOffsetY = 0;

  ctx.fillText("No Shadow", 20, 80);

</script>

이 예제는 그림자가 있는 텍스트와 그림자를 제거한 텍스트를 비교해서 보여준다.

복합 그림자 효과

여러 도형을 그려서 복잡한 그림자 효과를 만들 수 있다.

<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.shadowColor = "rgba(0, 0, 0, 0.3)";

  ctx.shadowBlur = 10;

  ctx.shadowOffsetX = 5;

  ctx.shadowOffsetY = 5;

  ctx.fillStyle = "orange";

  ctx.fillRect(30, 30, 60, 60);

  ctx.fillStyle = "purple";

  ctx.beginPath();

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

  ctx.fill();

  ctx.fillStyle = "green";

  ctx.beginPath();

  ctx.moveTo(220, 30);

  ctx.lineTo(270, 30);

  ctx.lineTo(245, 80);

  ctx.closePath();

  ctx.fill();

</script>

이 예제는 사각형, 원, 삼각형 모두에 동일한 그림자 효과를 적용한다.

그라데이션과 그림자 조합

그라데이션 효과와 그림자를 함께 사용하여 더욱 풍부한 시각 효과를 만들 수 있다.

<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.createLinearGradient(0, 0, 200, 0);

  gradient.addColorStop(0, "red");

  gradient.addColorStop(1, "yellow");

  ctx.shadowColor = "rgba(0, 0, 0, 0.5)";

  ctx.shadowBlur = 15;

  ctx.shadowOffsetX = 8;

  ctx.shadowOffsetY = 8;

  ctx.fillStyle = gradient;

  ctx.fillRect(50, 40, 200, 60);

</script>

이 예제는 빨강에서 노랑으로 변하는 그라데이션과 그림자가 함께 적용된 사각형을 만든다.

💡 그림자 효과 팁:
• 그림자는 성능에 영향을 줄 수 있으므로 필요한 경우에만 사용하자
• RGBA를 사용하여 그림자의 투명도를 조절하면 더 자연스러운 효과를 만들 수 있다
• offset을 0으로 설정하면 발광 효과를 만들 수 있다

동적 그림자 효과

애니메이션을 통해 그림자가 변하는 효과를 만들 수 있다.

<canvas id="myCanvas9" width="300" height="150" style="border:1px solid #d3d3d3;">
브라우저가 HTML5 Canvas를 지원하지 않습니다.
</canvas>
<script>
var c = document.getElementById("myCanvas9");
var ctx = c.getContext("2d");
var blur = 0;
var increasing = true;
function animateShadow() {
ctx.clearRect(0, 0, 300, 150);
ctx.font = "30px Arial";
ctx.shadowColor = "blue";
ctx.shadowBlur = blur;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.fillStyle = "white";
ctx.fillText("Glow Effect", 50, 80);
if (increasing) {
blur += 0.5;
if (blur >= 20) increasing = false;
} else {
blur -= 0.5;
if (blur <= 0) increasing = true; } requestAnimationFrame(animateShadow); } animateShadow(); </script>[/code]

이 예제는 그림자의 흐림 정도가 0에서 20 사이에서 계속 변하면서 발광 효과가 맥박치는 듯한 애니메이션을 만든다.

Canvas의 그림자 기능을 활용하면 평면적인 그래픽에 깊이감과 입체감을 더할 수 있다. 적절히 사용하면 전문적이고 시각적으로 매력적인 결과를 얻을 수 있다.