HTML5 Canvas로 그림자 효과 그리기
HTML5 Canvas에서는 별도의 이미지 편집 없이도 그래픽 요소에 자연스러운 그림자(shadow) 효과를 추가할 수 있습니다. 캔버스 컨텍스트가 제공하는 그림자 관련 속성 몇 가지만 설정하면, 텍스트나 도형에 입체적인 느낌을 손쉽게 부여할 수 있습니다.
캔버스 그림자의 핵심 속성
Canvas 2D 컨텍스트에서 그림자를 제어하는 대표적인 속성은 다음 네 가지입니다.
- shadowOffsetX – 그림자가 원본으로부터 수평 방향으로 얼마나 떨어질지 지정합니다.
- shadowOffsetY – 그림자가 수직 방향으로 얼마나 떨어질지 지정합니다.
- shadowBlur – 그림자의 흐림(blur) 정도를 조절합니다. 값이 클수록 부드럽고 번진 느낌의 그림자가 됩니다.
- shadowColor – 그림자의 색상을 지정하며, 보통 rgba() 형식을 사용해 반투명한 검정색으로 설정합니다.
전체 예제 코드
다음은 캔버스에 그림자 효과가 적용된 텍스트를 그리는 완전한 HTML 예제입니다.
<!DOCTYPE HTML>
<html>
<head>
<style>
#test {
width: 100px;
height:100px;
margin: 0px auto;
}
</style>
<script>
function drawShape(){
// DOM을 통해 canvas 요소를 가져옵니다.
var canvas = document.getElementById('mycanvas');
// canvas를 지원하지 않는 브라우저에서 실행되지 않도록 확인합니다.
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>코드 동작 방식 살펴보기
위 예제의 동작 순서를 단계별로 살펴보면 다음과 같습니다.
- canvas 요소 가져오기 – document.getElementById() 메서드를 사용해 HTML 문서에서 id가 'mycanvas'인 캔버스 요소를 선택합니다.
- 컨텍스트 지원 여부 확인 – canvas.getContext 값이 존재하는지 검사하여, 캔버스를 지원하지 않는 구형 브라우저에서는 안내 메시지를 표시하고 스크립트 실행을 중단합니다.
- 2D 컨텍스트 생성 – getContext('2d')를 호출해 그리기 작업에 사용할 2D 렌더링 컨텍스트를 얻습니다.
- 그림자 속성 설정 – shadowOffsetX와 shadowOffsetY를 각각 2픽셀로 지정해 그림자를 오른쪽 아래로 약간 이동시키고, shadowBlur를 2로 설정해 부드러운 가장자리를 만듭니다. shadowColor는 'rgba(0, 0, 0, 0.5)'로 지정하여 50% 불투명도의 검정 그림자를 만듭니다.
- 텍스트 출력 – font와 fillStyle을 설정한 후 fillText() 메서드로 좌표 (5, 30) 위치에 문자열을 그립니다. 이때 앞서 설정한 그림자 효과가 함께 적용됩니다.
참고 사항
그림자 속성은 한 번 설정하면 이후 캔버스에 그려지는 모든 도형과 텍스트에 계속 적용됩니다. 따라서 특정 요소에만 그림자를 적용하고 싶다면, 해당 요소를 그린 뒤 그림자 관련 속성을 초기화하거나 save()/restore() 메서드로 상태를 저장·복원하는 것이 좋습니다.
또한 위 예제는 Safari 또는 Firefox 1.5 이상처럼 HTML5 Canvas를 지원하는 최신 브라우저 환경에서 실행해야 정상적으로 동작합니다.