HTML5 Canvas 그림자

HTML5 Canvas shadows는 온라인에서5canvas에 그려진 형상에 자동으로 그림자를 추가합니다, shadowOffsetX와 shadowOffsetY는 그림자를 그리려는 형상에서의 거리를 설정합니다.

온라인 예제

HTML에서5canvas에 그려진 형상에 자동으로 그림자를 추가합니다. 다음은 몇 가지 예제입니다:

그림자는 다음 네 가지로 설정됩니다:2D Context 속성이 제어합니다:

1. shadowOffsetX

2. shadowOffsetY

3. shadowBlur

4. shadowColor

shadowOffsetX와 shadowOffsetY는 그림자를 그리려는 형상에서의 거리를 설정합니다. 양수는 그림자가 형상의 (x)좌측과 (y)상단에 그려짐을 의미합니다. 음수는 형상의 (x)우측과 (y)하단에 그려짐을 의미합니다.
shadowBlur은 그림자가 흐릿해질 정도를 설정합니다. 숫자가 클수록 형상이 흐릿해집니다. 숫자가 낮을수록 그림자가 날카롭게 보입니다. 0은 그림자가 완전히 흐릿하지 않음을 의미합니다.
shadowColor은 그림자의 색상을 설정합니다.
위 예제의 코드는 다음과 같습니다:

<canvas id="ex1" width="500" height="200" style="border:　1px solid #cccccc;">
　　　　HTML5　Canvas는 지원되지 않습니다
</canvas>
<script>
var canvas = document.getElementById("ex1));
var context = canvas.getContext("2d);
context.shadowOffsetX =　10;
context.shadowOffsetY =　10;
context.shadowBlur =　4;
context.shadowColor = "#666666";//또는 사용rgb(빨강, 녹색, 파랑)
context.fillStyle = "#000000";
context.fillRect(10,10,　50,　50);
context.fillStyle = "#000066";
context.font = "30px Arial";
context.fillText("HTML5　Canvas Shadow",　10,120);
</script>