그림자 효과 HTML5



 

그림자효과

 

 

 

 

그리기 컨텍스트가 가진 그림자 효과에 관한 속성 네가지

 

 

    - shadowColor : 그림자 색깔, 기본값은 투명

    - shadowOffsetX : 그림자를 표시할 위치의 X좌표

    - shadowOffsetY : 그림자를 표시할 위치의 Y좌표

    - shadowBlur : 그림자의 흐림정도를 지정

 

 

 

그림자 효과를 예제를 통해 더욱 더 자세히 알아보자.

 

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> HTML5 TEST </TITLE>
</HEAD>
<BODY>
 <canvas id="canvas1" width="500" height="500"></canvas>

 <SCRIPT LANGUAGE="JavaScript">
 <!--
 var canvas = document.getElementById("canvas1");
 var context = canvas.getContext("2d");

 context.shadowOffsetX = 5;
 context.shadowOffsetY = 5;
 context.shadowColor = "gray";
 context.shadowBlur = 2;

 context.fillRect(0, 0, 200, 200);

 //-->
 </SCRIPT>

</BODY>
</HTML>

 

그림자 효과가 잘 출력되었는지 확인해보자.

 


덧글

댓글 입력 영역


통계 위젯 (화이트)

1522
132
358625

red 210