HTML 캔버스(Canvas)의 shadowBlur 속성은 그림자의 흐림(blur) 정도를 설정하는 데 사용됩니다. 기본값은 0이며, 값이 커질수록 그림자가 더 부드럽고 넓게 퍼지는 효과를 냅니다.
<canvas> 요소는 자바스크립트(JavaScript)를 활용해 웹 페이지 위에 그래픽을 자유롭게 그릴 수 있게 해주는 HTML5의 강력한 기능입니다. 모든 캔버스는 크기를 정의하는 두 가지 속성, 즉 height(높이)와 width(너비)를 가지고 있습니다.
shadowBlur 속성 문법
shadowBlur 속성의 기본적인 사용 문법은 다음과 같습니다.
ctx.shadowBlur = num;
여기서 num은 그림자에 적용할 흐림 정도를 나타내는 숫자 값입니다. 값이 클수록 그림자 경계가 더 많이 번지게 됩니다.
shadowBlur 속성 예제
아래 예제는 캔버스에서 shadowBlur 속성을 실제로 구현한 코드입니다. 두 개의 사각형에 서로 다른 흐림 값과 색상을 적용해 차이를 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<canvas id="newCanvas" width="600" height="350" style="border:2px solid orange;">
</canvas>
<script>
var c = document.getElementById("newCanvas");
var ctx = c.getContext("2d");
// 첫 번째 사각형 - 초록색, blur 20
ctx.shadowBlur = 20;
ctx.shadowColor = "black";
ctx.fillStyle = "green";
ctx.fillRect(40, 40, 100, 250);
// 두 번째 사각형 - 주황색, blur 30
ctx.shadowBlur = 30;
ctx.shadowColor = "blue";
ctx.fillStyle = "orange";
ctx.fillRect(200, 40, 200, 150);
</script>
</body>
</html>실행 결과
위 코드를 실행하면 첫 번째 사각형에는 검은색 그림자가 blur 값 20으로 적용되고, 두 번째 사각형에는 파란색 그림자가 blur 값 30으로 적용됩니다. 이처럼 shadowBlur 값이 클수록 그림자가 더 넓게 퍼지며 부드러운 느낌을 준다는 것을 시각적으로 확인할 수 있습니다.
참고 사항
그림자 효과를 제대로 보려면 shadowColor 속성도 함께 설정해야 합니다. shadowColor가 지정되지 않으면 그림자가 표시되지 않거나 의도한 대로 나타나지 않을 수 있습니다. 또한 그림자 관련 속성으로는 shadowOffsetX, shadowOffsetY가 있으며, 이를 조합하면 그림자의 위치와 방향까지 세밀하게 조절할 수 있습니다.