Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

HTML Canvas shadowOffsetY 속성 – 그림자의 세로 오프셋 설정하기

HTML 캔버스(Canvas)의 shadowOffsetY 속성은 도형에서 그림자가 떨어져 있는 세로(수직) 거리를 설정하는 데 사용됩니다. <canvas> 요소는 자바스크립트(JavaScript)를 활용해 웹 페이지 위에 그래픽을 자유롭게 그릴 수 있게 해주는 강력한 도구입니다.

캔버스의 기본 구조

모든 캔버스는 크기를 정의하는 두 가지 속성을 가지고 있습니다. 바로 캔버스의 높이(height)와 너비(width)입니다. 이 두 값을 지정하면 원하는 크기의 드로잉 영역을 만들 수 있습니다.

shadowOffsetY 속성 문법

shadowOffsetY 속성의 기본 문법은 다음과 같습니다.

context.shadowOffsetY=num;

여기서 num은 그림자가 도형으로부터 세로 방향으로 얼마나 떨어질지를 나타내는 픽셀 단위의 값입니다. 값이 클수록 그림자가 아래쪽으로 더 멀리 이동합니다.

shadowOffsetY 속성 예제

이제 실제 예제를 통해 캔버스의 shadowOffsetY 속성이 어떻게 동작하는지 살펴보겠습니다.

예제 코드

<!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");
    ctx.shadowBlur = 30;
    ctx.shadowOffsetX = 35;
    ctx.shadowOffsetY = 35;
    ctx.shadowColor = "orange";
    ctx.fillStyle = "red";
    ctx.fillRect(150, 60, 280, 250);
</script>
</body>
</html>

코드 설명

  • shadowBlur = 30: 그림자의 흐림 효과(블러) 강도를 설정합니다.
  • shadowOffsetX = 35: 그림자를 가로 방향으로 35픽셀 이동시킵니다.
  • shadowOffsetY = 35: 그림자를 세로 방향으로 35픽셀 이동시킵니다.
  • shadowColor = "orange": 그림자 색상을 주황색으로 지정합니다.
  • fillRect(): 빨간색 사각형을 그리고, 위에서 설정한 그림자 효과가 함께 적용됩니다.

실행 결과

위 코드를 실행하면 빨간색 사각형에 주황색 그림자가 오른쪽 아래 방향으로 떨어진 모습을 확인할 수 있습니다. shadowOffsetY 값을 조절하면 그림자의 세로 위치를 자유롭게 변경할 수 있어, 입체적인 시각 효과를 손쉽게 연출할 수 있습니다.