HTML5 Canvas 그림자 속성이란?
HTML5의 <canvas> 요소는 도형이나 텍스트 주위에 자연스러운 그림자 효과를 만들 수 있는 기능을 제공합니다. 별도의 이미지 편집 없이도 코드 몇 줄만으로 입체감 있는 드로잉을 구현할 수 있어 UI 요소, 게임 그래픽, 데이터 시각화 등 다양한 분야에서 활용됩니다.
Canvas에서 그림자는 전역(global) 속성으로 관리되며, 총 네 가지 속성이 모든 그리기 작업에 영향을 미칩니다. 한 번 설정하면 이후의 fillRect(), stroke(), fillText() 등 모든 드로잉 명령에 동일하게 적용됩니다.
그림자 관련 핵심 속성 정리
| 번호 | 속성 및 설명 |
|---|---|
| 1 | shadowColor [ = value ] 현재 설정된 그림자 색상을 반환하며, 값을 지정하면 그림자 색상을 변경할 수 있습니다. CSS 색상 값 형식(예: '#000000', 'rgba(0,0,0,0.5)')을 사용합니다. |
| 2 | shadowOffsetX [ = value ] 현재 그림자의 X축 오프셋(수평 이동 거리)을 반환하며, 값을 지정해 변경할 수 있습니다. 양수는 오른쪽, 음수는 왼쪽으로 그림자가 이동합니다. |
| 3 | shadowOffsetY [ = value ] 현재 그림자의 Y축 오프셋(수직 이동 거리)을 반환하며, 값을 지정해 변경할 수 있습니다. 양수는 아래쪽, 음수는 위쪽으로 그림자가 이동합니다. |
| 4 | shadowBlur [ = value ] 현재 그림자에 적용된 흐림(blur) 정도를 반환하며, 값을 지정해 흐림 수준을 조절할 수 있습니다. 값이 클수록 부드럽고 퍼지는 그림자가 됩니다. |
간단한 사용 예제
아래 예제는 네 가지 속성을 모두 활용해 사각형에 부드러운 그림자를 적용하는 방법을 보여줍니다.
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 그림자 설정
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'; // 반투명 검은색 그림자
ctx.shadowOffsetX = 10; // 오른쪽으로 10px 이동
ctx.shadowOffsetY = 10; // 아래로 10px 이동
ctx.shadowBlur = 15; // 흐림 효과 15px
// 그림자가 적용된 사각형 그리기
ctx.fillStyle = '#4a90d9';
ctx.fillRect(50, 50, 150, 100);활용 팁
- 그림자 초기화: 그림자가 더 이상 필요하지 않으면
shadowColor를 투명한 값('rgba(0,0,0,0)')으로 설정하거나 오프셋과 블러 값을 0으로 되돌려야 이후 그리기 작업에 영향을 주지 않습니다. - 성능 고려:
shadowBlur값이 클수록 렌더링 비용이 증가하므로, 애니메이션처럼 반복적으로 그리는 경우에는 적절한 수준으로 조절하는 것이 좋습니다. - 빛 방향 연출: offsetX와 offsetY를 음수로 설정하면 광원이 아래나 오른쪽에 있는 듯한 효과를 낼 수 있어, 원하는 조명 방향에 따라 자유롭게 조합할 수 있습니다.