HTML 캔버스 shadowColor 속성이란?
HTML 캔버스(Canvas)의 shadowColor 속성은 그리기 요소에 적용되는 그림자의 색상을 지정하는 데 사용됩니다. 이 속성의 기본값은 #000000(검정색)이며, CSS에서 지원하는 다양한 색상 표기법(색상 이름, HEX 코드, RGB 등)을 사용할 수 있습니다.
문법(Syntax)
shadowColor 속성의 기본 문법은 다음과 같습니다.
ctx.shadowColor = color;
여기서 color에는 그림자에 적용할 색상 값을 지정합니다. 단순히 색상만 설정해서는 그림자가 보이지 않으므로, 일반적으로 shadowBlur 속성과 함께 사용하여 그림자의 흐림 정도를 조절합니다.
shadowColor 속성 활용 예제
다음은 캔버스의 shadowColor 속성을 실제로 구현한 예제입니다. 파란색 사각형에 회색 그림자 효과를 적용합니다.
<!DOCTYPE html>
<html>
<body>
<canvas id="newCanvas" width="600" height="350" style="border:2px solid orange;">
</canvas>
<script>
var c = document.getElementById("newCanvas");
var ctx = c.getContext("2d");
ctx.shadowBlur = 20;
ctx.shadowColor = "gray";
ctx.fillStyle = "blue";
ctx.fillRect(40, 40, 200, 250);
</script>
</body>
</html>코드 설명
- shadowBlur = 20: 그림자의 흐림(블러) 정도를 20픽셀로 설정하여 부드러운 그림자 효과를 만듭니다.
- shadowColor = "gray": 그림자 색상을 회색으로 지정합니다.
- fillStyle = "blue": 사각형의 채우기 색상을 파란색으로 설정합니다.
- fillRect(40, 40, 200, 250): 좌표 (40, 40)에서 시작하여 너비 200px, 높이 250px 크기의 사각형을 그립니다.
실행 결과
위 코드를 실행하면 주황색 테두리가 있는 캔버스 안에 파란색 사각형이 그려지고, 사각형 뒤로 회색의 부드러운 그림자가 나타나는 것을 확인할 수 있습니다.
참고: 관련 그림자 속성
캔버스에서 그림자 효과를 제어할 때는 shadowColor 외에도 다음 속성들을 함께 활용하면 좋습니다.
- shadowBlur: 그림자의 흐림 정도를 설정합니다.
- shadowOffsetX: 그림자의 가로 방향 오프셋(거리)을 설정합니다.
- shadowOffsetY: 그림자의 세로 방향 오프셋(거리)을 설정합니다.