yeon
yeon I am a Korean web programmer with bboy dancing as a hobby. :)

The canvas shadow

The canvas shadow

shadow

canvas에서 제공하는 그림자 속성을 사용하여 그림자 그리기


shadowOffsetX = float

  • 그림자가 객체에서 연장되어야 하는 수평거리 (기본값: 0)

shadowOffsetY = float

  • 그림자가 객체에서 연장되어야 하는 수직거리 (기본값: 0)

shadowBlur = float

  • 흐림(blur) 효과의 크기 (기본값: 0)

shadowColor = color

  • 그림자 효과의 색상 (기본값: black)


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);
}

shadow Image





comments powered by Disqus