Develop/canvas

19. shadow - 그림자

GuriZzang 2015. 8. 10. 15:28

GuriZzang.com에 오시면 

더 자세한 내용을 보실 수 있습니다.


  • .shadowOffsetX = float
  • 설명 : 그림자가 오브젝트에서 수평으로 얼마나 떨어져 있는지 가리킵니다. 
  • 이 값은 모양 변형에는 영향을 받지 않으며, 초기 설정값은 0입니다.
  • .shadowOffsetY = float
  • 설명 : 그림자가 오브젝트에서 수직으로 얼마나 떨어져 있는지 가리킵니다. 
  • 이 값은 모양 변형에는 영향을 받지 않으며, 초기 설정값은 0입니다.
  • .shadowBlur = float
  • 설명 : 블러(blur) 효과의 크기를 가리킵니다. 
  • 이 값이 픽셀 수와 일치하는 것은 아니며, 모양 변형에는 영향을 받지 않습니다. 초기 설정값은 0입니다.
  • .shadowColor = color
  • 설명 : 그림자 효과에 사용될 색상이며 표준 CSS 색상 값을 가집니다. 
  • 초기 설정값은 투명도값이 100 퍼센트인 검정색입니다.

 

shadowOffsetX와 shadowOffsetY는 오브젝트의 어느 방향으로 얼마나 떨어져 있는지 가리킵니다. 이 값은 현재의 모양 변형에 영향을 받지 않습니다. 음수 값은 그림자를 위쪽이나 왼쪽에 만들고, 양수 값은 그림자를 아래쪽이나 오른쪽에 만듭니다. 초기 설정값은 0입니다.


shadowBlur는 블러 효과의 크기를 가리키며, 픽셀 수와 일치하지 않고, 현재의 모양 변형에 영향을 받지 않습니다. 초기 설정값은 0입니다.


shadowColor는 그림자의 색을 설정하며, 표준 CSS 색상 값을 가집니다. 초기 설정값은 투명도값이 100 퍼센트인 검정색입니다.



Source 

1
2
3
4
5
6
7
8
9
10
11
12
function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
 
  ctx.shadowOffsetX = 2;
  ctx.shadowOffsetY = 2;
  ctx.shadowBlur = 2;
  ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
  
  ctx.font = "20px Times New Roman";
  ctx.fillStyle = "Black";
  ctx.fillText("Sample String", 5, 30);
}

Demo