1.3 색상(color)과 스타일(style)

1.3 색상(color)과 스타일(style)

canvas에서 직선이나 도형 등의 색과 스타일을 설정하기 위해서는 context의 다음과 같은 2 가지 형태의 속성을 이용합니다.

속성	설명
fillStyle	직선이나 도형 등의 내부 색상이나 스타일을 설정
strokeStyle	직선이나 도형 등의 외부 색상이나 스타일을 설정

먼저 직선이나 도형 등의 내부 색상이나 스타일을 설정하는 fillStyle 속성을 보면 다음과 같은 형식을 사용합니다.

context.fillStyle=color | gradient | pattern

fillStyle 속성값으로 color인 경우 CSS 색상값을 설정해주면 되는데 색상 키워드나 #+16진수 형태, 그리고 RGB, RGBA, 등과 같은 색상값을 설정해주면 됩니다. 다음으로 gradient를 사용할 경우 선이나 원형 형태의 색상 변화를 주는 형태로 내부를 채우게 됩니다.
마지막으로 pattern을 속성값으로 사용할 경우는 특정 패턴으로 내부를 채울 때 사용하는데 예를 들어 직사각형의 내부를 특정 이미지로 채우고자 할 때 사용할 수 있습니다.

다음으로 직선이나 도형 등의 외부 색상이나 스타일을 설정하는 strokeStyle 속성은 다음과 같이  fillStyle 속성과 동일한 형식을 사용합니다.

context.stokeStyle=color | gradient | pattern

이미 fillStyle 속성값에 대해서 설명했으므로 추가적인 설명은 생략하고 fillStyle, strokeStyle 속성값이 color인 경우의 간단한 예제를 하나 해봅니다. 메모장으로 “basic.html”을 열고 다음과 같이 “// canvas에 그릴 선이나 도형 작성” 부분에 코드를 작성합니다.

      // canvas에 그릴 선이나 도형 작성
      context.fillStyle = "green";
      context.fillRect(20,20,100,100);
   
      context.strokeStyle="rgb(0,0,255)";
      context.strokeRect(120,120,100,100);
    }
  </script>

fillStyle 속성값을 기본 색상 키워드인 녹색으로 설정하고 이를 fillRect() 메서드를 이용하여 그려지는 직사각형 내부에 채우도록 합니다. 다음 strokeStyle 속성값으로 파란색(rgb(0,0,255))로 설정하고 strokeRect() 메서드들 이용하여 직사각형을 그리고 외부 색상을 칠하도록 합니다.

이제 다른 이름으로 저장을 선택하여 “colorandstyleEx.html”로 저장합니다. IE9를 이용해서 연결해보면 다음과 같이 나타납니다.

- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 Canvas에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인 학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기 바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를 비밀댓글로 남겨주시면 연락드리겠습니다.