HTML <canvas> fillStyle, strokeStyle - 색상 설정하기

1. 색상 적용하기

fillStyle 과 strokeStyle 은 도형에 색을 적용할 때 사용합니다.

fillStyle 은 도형의 채우는 색을 설정할 때, strokeStyle 은 도형의 윤곽선 색을 설정할 때 사용합니다.

 

fillStyle = color;

strokeStyle = color;

 

여기서의 color는 CSS의 <color>, 그라디언트 객체, 패턴 객체를 뜻합니다. 윤곽선과 채움 색의 초기 설정값은 검은색(#000000) 입니다.

 

strokeStyle 또는 fillStyle 속성을 설정하면, 새로 설정된 값이 앞으로 그려질 도형의 기본 값이 됩니다.
각 도형에 다른 색을 적용하려면 fillStyle 또는 strokeStyle속성을 다시 적용해야 합니다.

 

fillStyle 과 strokeStyle 의 color값은 아래의 CSS3 사양에 나오는 컬러값을 사용합니다.

 

ctx.fillStyle = "orange";
ctx.fillStyle = "#FFA500";
ctx.fillStyle = "rgb(255, 165, 0)";
ctx.fillStyle = "rgba(255, 165, 0, 1)";

 

 

 

2. fillStyle 예제

function draw() {
      var ctx = document.getElementById('canvas').getContext('2d');
      for (var i = 0; i < 6; i++) {
        for (var j = 0; j < 6; j++) {
          ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ', ' +
            Math.floor(255 - 42.5 * j) + ', 0)';
          ctx.fillRect(j * 25, i * 25, 25, 25);
        }
      }
    }

 

결과 화면

 

이 예제에서는 for 반복문을 두 번 사용하여 사각형 격자를 그렸습니다. 

각 사각형의 RGB 색상값에서 붉은색과 녹색 값만을 변수 i 와 j 를 사용하여 변경합니다. 파란색 채널은 고정된 값입니다. 채널 값들을 변경함으로써, 모든 종류의 팔레트를 생성할 수 있습니다. 

 

 

 

3. strokeStyle 예제

function draw() {
      var ctx = document.getElementById('canvas').getContext('2d');
      for (var i = 0; i < 6; i++) {
        for (var j = 0; j < 6; j++) {
          ctx.strokeStyle = 'rgb(0, ' + Math.floor(255 - 42.5 * i) + ', ' +
            Math.floor(255 - 42.5 * j) + ')';
          ctx.beginPath();
          ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);
          ctx.stroke();
        }
      }
    }

 

결과 화면

 

 

 

 

 

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