2-1-5.그림자

다음 메서드는 도형의 아래쪽에 그림자를 깔아 입체적인 모양을 만든다. 색상, 거리, 퍼짐 정도를 지정할 수 있다.

속성	설명
shadowColor	그림자의 색상. 디폴트는 검은색이다.
shadowOffsetX, shadowOffsetY	그림자의 수평, 수직 위치. 음수를 주면 위쪽으로 그림자가 생성된다. 디폴트값은 0이다.
shadowBlur	그림자가 흐려지는 정도. 기본값 0은 또렷한 그림자를 그리며 이 값이 커질수록 그림자가 흐려진다.

그림자가 보이려면 최소한 색상과 오프셋을 같이 지정해야 한다. 보통 4가지 속성을 한꺼번에 지정하되 shadowBlur는 생략하기도 한다.

shadow.html

function draw() {

ctx.shadowColor="gray"

ctx.shadowOffsetX=10;

ctx.shadowOffsetY=10;

ctx.fillRect(10,10,100,100);

}

사각형을 그리고 10픽셀 오른쪽 아래에 회색의 그림자를 깔았다. 오프셋을 음수로 주어 그림자를 왼쪽이나 위에 둘 수도 있다.

그림자가 너무 또렷해서 그림자답지 않아 보이는데 shadowBlur 속성을 지정하면 그림자의 경계가 흐릿해져서 진짜 그림자처럼 보인다. 다음 한 줄을 추가해 보자. 위 오른쪽 그림처럼 그림자가 흐릿해진다. 도형에는 그림자를 깔아 봐야 별로 멋이 없고 텍스트에 효과적이다.

shadow2.html

function draw() {

ctx.shadowColor="gray"

ctx.shadowOffsetX=10;

ctx.shadowOffsetY=10;

ctx.shadowBlur=10;

ctx.fillRect(10,10,100,100);

}

그림자는 응용하기에 따라서는 멋드러진 효과를 낼 수 있는 기능이다. 그러나 그림자가 있으면 내부적으로 그림자를 위한 비트맵을 생성하고 흐릿하게 처리하고 반투명 처리까지 들어간 후 화면 캔버스와 합성하는 복잡한 처리를 해야 한다. 컴퓨터가 워낙 빨라져 정적인 화면에서는 사용해도 무방하지만 애니메이션처럼 자주 바뀌는 화면에서는 자재하는 것이 좋다. 정 그림자를 쓰고 싶다면 아예 비트맵에 그림자를 박아 넣는 것이 성능에는 훨씬 더 유리하다.