HTML5 그림자 스타일 지정하기

HTML5 그림자 스타일 지정하기

 

그림자 스타일 속성

 

그림자 스타일을 지정하는 데는 4가지 속성이 사용됩니다.

 

속성	설명
shadowColor	그림자 색깔을 지정함 (기본값 : 투명)
shadowOffsetX	대상을 기준으로 그림자의 x좌표를 지정함 (기본값 : 0)
shadowOffsetY	대상을 기준으로 그림자의 y좌표를 지정함 (기본값 : 0)
shadowBlur	그림자의 흐림 정도를 지정함 (기본값 : 0)

 

그림자 스타일 지정 형식

형식

context.shadowOffsetX = x; context.shadowOffsetY = y; context.shadowColor = 색상; context.shadowBlur = 흐림도;

예제

context.shadowOffsetX = 10;              //  그림자의 x 좌표를 지정함  context.shadowOffsetY = 10;              //  그림자의 y 좌표를 지정함  context.shadowColor = 'Blue';           //  그림자의 색상을 지정함  context.shadowBlur = 1;                       //  그림자의 흐림도를 지정함  context.fillRect(120, 120, 110, 110);

 

그림자 스타일 지정하기 실습 프로그램