HTML <canvas> 그라디언트(Gradient)

1. 그라디언트

다른 그래픽 프로그램들과 마찬가지로 캔버스에서도, 도형에 그라디언트를 사용할 수 있습니다.

아래의 메소드 중 하나를 사용하여 객체를 생성합니다. 그 다음 이 객체를 fillStyle 또는 strokeStyle 속성에 할당할 수 있습니다.

 

createLinearGradient(x1, y1, x2, y2);

시작점 좌표를 (x1, y1)로 하고, 종료점 좌표를(x2, y2)로 하는 선형 그라디언트 객체를 생성합니다.

 

createRadialGradient(x1, y1, r1, x2, y2, r2);

반지름이 r1이고 좌표(x1, y1)을 중심으로 하는 원과, 반지름이 r2이고 좌표(x2, y2)를 중심으로 하는 원을 사용하여 그라디언트 객체를 생성합니다.

 

gradient.addColorStop(position, color);

객체를 만들었다면, addColorStop() 메소드를 사용하여 객체에 색을 적용할 수 있습니다.

 

그라디언트 객체에 새로운 색 중단점(color stop)을 생성합니다. 포지션은 0.0에서 1.0 사이의 숫자이고 그라디언트에서 색상의 상대적인 위치를 정의합니다. color 인자는 CSS 컬러를 나타내는 문자열이여야하고, 그라디언트가 전환효과로 진행되면서 도달한 지점의 색상을 의미합니다.

 

 

 

2. createLinearGradient 예제

function draw() {
    var ctx = document.getElementById('canvas').getContext('2d');

    // 그레이디언트를 생성한다
    var lingrad = ctx.createLinearGradient(0, 0, 0, 500);
    lingrad.addColorStop(0, '#00ABEB');
    lingrad.addColorStop(0.6, '#fff');
    lingrad.addColorStop(0.6, '#26C000');
    lingrad.addColorStop(1, '#000');

    var lingrad2 = ctx.createLinearGradient(0, 200, 0, 350);
    lingrad2.addColorStop(0.5, '#000');
    lingrad2.addColorStop(1, 'rgba(0, 0, 0, 0)');

    // 외곽선과 채움 스타일에 그레이디언트를 적용한다
    ctx.fillStyle = lingrad;
    ctx.strokeStyle = lingrad2;

    // 도형을 그린다
    ctx.fillRect(50, 50, 500, 500);
    ctx.strokeRect(200, 200, 200, 200);

    }

 

결과 화면

 

 

3. createRadiaGradient 예제

function draw() {
      var ctx = document.getElementById('canvas').getContext('2d');

      // 그라디언트를 생성한다
      var radgrad = ctx.createRadialGradient(180, 180, 40, 208, 200, 120);
      radgrad.addColorStop(0, '#A7D30C');
      radgrad.addColorStop(0.9, '#019F62');
      radgrad.addColorStop(1, 'rgba(1,159,98,0)');

      var radgrad2 = ctx.createRadialGradient(420, 420, 80, 448, 480, 200);
      radgrad2.addColorStop(0, '#FF5F98');
      radgrad2.addColorStop(0.75, '#FF0188');
      radgrad2.addColorStop(1, 'rgba(255,1,136,0)');

      var radgrad3 = ctx.createRadialGradient(380, 60, 60, 408, 80, 160);
      radgrad3.addColorStop(0, '#00C9FF');
      radgrad3.addColorStop(0.8, '#00B5E2');
      radgrad3.addColorStop(1, 'rgba(0,201,255,0)');

      var radgrad4 = ctx.createRadialGradient(0, 600, 200, 0, 560, 360);
      radgrad4.addColorStop(0, '#F4F201');
      radgrad4.addColorStop(0.8, '#E4C700');
      radgrad4.addColorStop(1, 'rgba(228,199,0,0)');

      // 도형을 그린다
      ctx.fillStyle = radgrad4;
      ctx.fillRect(0, 0, 600, 600);
      ctx.fillStyle = radgrad3;
      ctx.fillRect(0, 0, 600, 600);
      ctx.fillStyle = radgrad2;
      ctx.fillRect(0, 0, 600, 600);
      ctx.fillStyle = radgrad;
      ctx.fillRect(0, 0, 600, 600);
    }

 

결과 화면

 

그라디언트 마지막 색 적용 지점에는 투명도를 적용하였습니다.