HTML - 캔버스 도형에 그림자 지정

캔버스에 그려지는 요소의 그림자 효과를 줄 수 있습니다. 그러기 위해서는 다음 표의 프로퍼티를 사용할 수 있습니다.

프로퍼티	설 명
shadowColor	그림자 색상
shadowOffsetX	그림자가 떨어질 가로 방향
shadowOffsetY	그림자가 떨어질 세로 방향
shadowBlur	그림자 흐려짐 정도

 

<style>canvas { border: 1px solid black; }</style>
<canvas id="mycanvas"/>

<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
canvas.width = 200;
canvas.height = 200;
var context = canvas.getContext('2d');

context.shadowColor = "#ccc";
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowBlur = 15;

// 원에 그림자 효과
context.fillStyle = "#aaf";
context.beginPath();
context.arc(70,70,50, 0,2*Math.PI);
context.fill();

// 사각형에 그림자 효과
context.fillStyle = "#faa";
context.fillRect(105,10,100,100);
</script>

위 예제에서 그림자 위치를 각 10(px)로 하고, 흐려짐 정도를 15를 주었습니다. 두 번째 이미지는 그림자 위치를 각 30*20(px)로 하고, 흐려짐 정도를 2로 지정한 결과입니다.