Gradients

Gradients

 

• 사각형, 원형, 라인, 텍스트 등 Canvas에 단색을 적용할 수 있는 곳에는 모두 적용할 수 있으며 fillStyle이나 strokeStyle 속성으로 지정한다.
• 그라디언트를 지정할 때는 반드시 두 개 이상의 색상점(Color Stop)을 지정해야 한다.
• addColorStop(stop,color)
  - 그라디언트에 색상점(Color Stop)을 지정하는 메소드
  - stop은 0에서 1까지의 숫자로 지정한다.
• createLinearGradient(x0,y0,x1,y1)
  - 선형 그라디언트를 지정하는 메소드
  - addColorStop()과 함께 사용
  - x0와 y0는 그라디언트의 시작 지점 좌표를, x1와 y1는 그라디언트의 종료 지점 좌표를 지정한다.
  

  const canvas7 = document.getElementById('canvas7');
  const ctx7 = canvas7.getContext('2d');
  const gra2 = ctx7.createLinearGradient(0,0,0,canvas7.height);
  gra2.addColorStop(0, '#FDD5C0');
  gra2.addColorStop(0.6, '#F46161');
  gra2.addColorStop(1, '#FFCF62');
  ctx7.fillStyle = gra2; 
  ctx7.fillRect(0,0,canvas7.width,canvas7.height);
  ctx7.strokeStyle = gra1;
  ctx7.shadowColor = 'yellow'; ctx7.shadowBlur = 30;
  ctx7.strokeRect(150,100,300,200);​

• createRadialGradient(x0,y0,r0,x1,y1,r1)
  - 원형 그라디언트를 지정하는 메소드
  - addColorStop()과 함께 사용
  - x0와 y0는 그라디언트의 시작 원의 위차점을 나타내고 r0은 시작 원의 반지름이 된다.
  - x1와 y1는 그라디언트의 종류 원의 위치점을 나타내고 r1은 종류 원의 반지름을 의미한다.
  

  const canvas8 = document.getElementById('canvas8');
  const ctx8 = canvas8.getContext('2d');
  const gra3 = ctx8.createRadialGradient(200,150,5,300,200,300);
  gra3.addColorStop(0, '#8C7503');
  gra3.addColorStop(0.3, '#D1C1A9');
  gra3.addColorStop(0.8, '#03588C');
  gra3.addColorStop(1, '#011526');
  
  ctx8.globalAlpha = 0.5;
  ctx8.fillStyle = gra3;
  ctx8.fillRect(0,0,canvas8.width,canvas8.height);​