Styles and Shadow

Styles and Shadow

 

• fillStyle
  - 색상, 그라디언트, 패턴으로 면을 지정하는 속성
  - 기본값 #000000
• strokeStyle
  - 색상, 그라디언트, 패턴으로 선을 지정하는 속성
  - 기본값 #000000
• shadowColor
  - 그림자 색상을 지정하는 속성
  - shadowBlur나 shadowOffset과 함께 사용
• shadowBlur
  - 그림자의 흐름을 지정하는 속성
  - shadowColor와 함께 사용
  - 기본값 #000000
• shadowOffsetX / shadowOffsetY
  - 도형으로부터 그림자와의 거리를 지정하는 속성
  - shadowColor와 함께 사용
  - 기본값 0
  

  const canvas4 = document.getElementById('canvas4');
  const ctx4 = canvas4.getContext('2d');
  ctx4.shadowColor = 'black';
  ctx4.shadowBlur = 50;
  ctx4.shadowOffsetX = 20;
  ctx4.shadowOffsetY = 30;
  ctx4.fillStyle = 'cornflowerblue';
  ctx4.fillRect(150,100,300,200);​

• globalAlpha
  - 색의 투명도를 지정하는 속성
  - 0 : 투명 / 1 : 불투명
  

  const canvas5 = document.getElementById('canvas5');
  const ctx5 = canvas5.getContext('2d');
  ctx5.fillStyle='cornflowerblue';
  ctx5.fillRect(150,100,200,100);
  ctx5.globalAlpha = .8;
  ctx5.fillStyle='coral';
  ctx5.fillRect(200,150,200,100);
  ctx5.globalAlpha =1;
  ctx5.fillStyle='black';
  ctx5.fillRect(250,200,200,100);​