HTML5 캔버스는 도형이나 텍스트 주변에 자연스러운 그림자를 만들 수 있는 기능을 제공합니다. 그림자 효과는 별도의 특별한 함수 없이 네 가지 전역(global) 속성만 설정하면 되며, 이 속성들은 이후 실행되는 모든 그리기 작업에 공통적으로 적용됩니다.
그림자 관련 주요 속성
| 번호 | 속성 및 설명 |
|---|---|
| 1 | shadowColor [ = value ] 현재 설정된 그림자 색상을 반환합니다. 값을 지정하면 그림자 색상을 변경할 수 있으며, 일반적으로 CSS 색상 값이나 rgba() 형식을 사용합니다. |
| 2 | shadowOffsetX [ = value ] 그림자가 원본에서 가로 방향(X축)으로 얼마나 떨어져 있는지 나타내는 오프셋 값입니다. 값을 설정해 가로 위치를 조절할 수 있으며, 기본값은 0입니다. |
| 3 | shadowOffsetY [ = value ] 그림자가 세로 방향(Y축)으로 이동한 거리를 나타냅니다. 값을 설정해 세로 위치를 변경할 수 있으며, 마찬가지로 기본값은 0입니다. |
| 4 | shadowBlur [ = value ] 그림자 가장자리에 적용되는 흐림(blur) 정도를 나타냅니다. 값이 클수록 그림자가 더 부드럽게 퍼지며, 기본값은 0(흐림 없음)입니다. |
예제 코드
아래 예제는 텍스트에 그림자 효과를 적용하는 간단한 코드입니다. 브라우저에서 직접 실행해 결과를 확인해 보세요.
<!DOCTYPE HTML>
<html>
<head>
<style>
#test {
width: 100px;
height:100px;
margin: 0px auto;
}
</style>
<script type>
function drawShape(){
// DOM을 통해 캔버스 요소 가져오기
var canvas = document.getElementById('mycanvas');
// 캔버스 미지원 브라우저에서는 실행하지 않음
if (canvas.getContext){
// getContext로 2D 드로잉 컨텍스트 사용
var ctx = canvas.getContext('2d');
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
ctx.font = "20px Times New Roman";
ctx.fillStyle = "Black";
ctx.fillText("This is shadow test", 5, 30);
} else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
}
}
</script>
</head>
<body id = "test" onload = "drawShape();">
<canvas id = "mycanvas"></canvas>
</body>
</html>코드 설명
위 예제의 핵심 동작은 다음과 같습니다.
getContext('2d') 메서드로 2D 드로잉 컨텍스트를 얻은 뒤, 그림자 오프셋을 가로·세로 각각 2픽셀로 지정하고 shadowBlur를 2로 설정해 약간의 부드러운 번짐 효과를 줍니다. 그림자 색상은 반투명 검정인 rgba(0, 0, 0, 0.5)로 지정했습니다.
이후 fillText()로 텍스트를 그리면, 설정된 그림자 속성이 자동으로 적용되어 글자 뒤에 은은한 그림자가 함께 렌더링됩니다. 캔버스를 지원하지 않는 구형 브라우저에서는 경고창이 표시되어 안내됩니다.