HTML <canvas> globalAlpha - 투명도 설정하기

1. globalAlpha 

globalAlpha 는 도형의 투명도를 설정합니다.

또 다른 방법으로는 윤곽선(strokeStyle) 또는 채움(fillStyle) 스타일에 반투명 색을 적용할 수도 있습니다.

 

globalAlpha = transparencyValue;

 

투명도 값이 설정되면 이후 캔버스에 그려지는 모든 도형들의 투명도가 바뀝니다.

설정하는 값은 0.0(완전히 투명)과 1.0(완전히 불투명) 사이에 있어야 하며, 초기 설정값은 1.0(완전히 투명)입니다.

 

globalAlpha 는 모두 같은 투명도로 캔버스에 많은 도형을 그릴 때 유용합니다. 하지만 보통은 각가의 도형마다 투명도롤 설정하는 것이 더 유용할 것입니다.

strokeStyle 과 fillStyle 값에 CSS rgba 색상값은 적용할 수 있으므로, 투명한 색을 적용하려면 아래와 같은 표기법을 사용할 수 있습니다.

 

ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)';
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';

 

rgba() 함수는 rgb() 함수와 비슷하지만, 인자가 하나 더 있습니다. 마지막 인자는 투명도 값을 설정하는 인자입니다.

범위는 0.0(완전히 투명)에서 1.0(완전히 불투명) 입니다.

 

 

 

2. globalAlpha 예제

function draw() {
      var ctx = document.getElementById('canvas').getContext('2d');
      // 배경을 그린다
      ctx.fillStyle = '#FD0';
      ctx.fillRect(50, 50, 250, 250);
      ctx.fillStyle = '#6C0';
      ctx.fillRect(300, 50, 250, 250);
      ctx.fillStyle = '#09F';
      ctx.fillRect(50, 300, 250, 250);
      ctx.fillStyle = '#F30';
      ctx.fillRect(300, 300, 250, 250);
      ctx.fillStyle = '#FFF';

      // 투명값을 설정한다
      ctx.globalAlpha = 0.2;

      // 반투명한 원을 그린다
      for (var i = 0; i < 7; i++) {
        ctx.beginPath();
        ctx.arc(300, 300, 30 + 30 * i, 0, Math.PI * 2, true);
        ctx.fill();
      }
    }

 

결과 화면

 

네 가지의 다른 색을 가진 사각형을 배경으로 그렸습니다. 그리고 그 위에, 반투명한 원을 여러 개 그렸습니다.

globalAlpha 값을 0.2로 설정하면 이후 그려질 도형은 이 값을 사용합니다.

for 반복문을 사용하여 점점 큰 반지름의 원을 그려 원이 겹쳐지면서 점점 불투명하게 보이도록 만들었습니다.

 

 

 

3. rgba() 예제

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

      // 배경을 그린다
      ctx.fillStyle = 'rgb(255,221,0)';
      ctx.fillRect(50, 50, 500, 100);
      ctx.fillStyle = 'rgb(102,204,0)';
      ctx.fillRect(50, 150, 500, 100);
      ctx.fillStyle = 'rgb(0,153,255)';
      ctx.fillRect(50, 250, 500, 100);
      ctx.fillStyle = 'rgb(255,51,0)';
      ctx.fillRect(50, 350, 500, 100);
      ctx.fillStyle = 'rgb(179,30,169)';
      ctx.fillRect(50, 450, 500, 100);

      // 반투명한 사각형을 그린다
      for (var i = 0; i < 10; i++) {
        ctx.fillStyle = 'rgba(255,255,255,' + (i + 1) / 5 + ')';
        for (var j = 0; j < 5; j++) {
          ctx.fillRect(60 + i * 100, 60 + j * 100, 100, 80)
        }
      }
    }

 

결과 화면

 

이 예제에서는 겹쳐진 원을 그리는 대신, 불투명도가 증가하는 작은 사각형을 그렸습니다.

각각의 도형마다 윤곽선이나 채움 스타일을 따로 설정할 수 있기 때문에, rgba()를 사용할 때 더 제어가 쉽습니다.

 

 

 

 

**참고 사이트 https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial