그리기에 색상, 선스타일, 그라디언트, 패턴 및 그림자를 추가해보자 😳

안녕하세요! 두두코딩 입니다 ✋
오늘은 이전에 배운 것을 넘어, 스타일과 색 적용에 대해 알아보겠습니다.

🖇 소스코드에 마우스를 올리고 copy 버튼을 누를 경우 더 쉽게 복사할 수 있습니다!

궁금한 점, 보안점 남겨주시면 성실히 답변하겠습니다. 😁
+ 감상평 댓글로 남겨주시면 힘이됩니다. 🙇

스타일과 색 적용하기

이전 포스팅을 통해 실제 기본 선 그리는 방법들을 알아보았다. 기본 선을 통해 그리는 것도 멋있지만, 색감을 입혀 좀 더 매력적인 도형을 만들어보자.

색을 추가하는 방법은 Canvas 옵션을 통해 할 수 있다. 이번 포스팅을 통해 색상 변경, 선 스타일 변경, 패턴 그리고 그림자를 추가해보자.

색상

우리는 fillStyle과 strokeStyle을 통해 도형에 색을 채우거나, 도형의 윤곽선에 색을 추가하는 것을 알아보았다. 이전 포스팅에서는 색상이 따로 설정되지 않은 채 “검은색”으로 나오는 것을 봤을 것이다. 이제 색상을 추가해보도록 하자.

// 색상을 추가하는 방법

// 도형 색상 추가
fillStyle = color

// 윤곽선 색상 추가
strokeStyle = color

여기서 color는 CSS의 <color> 자료형을 뜻한다.

Tip CSS 자료형은 RGB 색공간을 한 색으로 표현한 것이고, 추가로 알파 채널의 투명값도 가질 수 있는 자료형을 말한다. 값을 정의할 수 있는 방법은 총 3가지이다.

우리는 위의 방법 중 하나를 택해 그리면 된다. 이번 포스팅에서는 RGB 3차원 좌표계 를 주로 사용해서 그리도록 하자. 아래의 예시를 보자.

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

위의 방법과 같이 적용할 경우 색이 적용된다. 여기서 참고해야할 점이 있는데, strokeStyle 또는 fillStyle의 함수는 속성을 설정하면, 새로 그려질 도형의 기본 값이 된다는 점이다. 즉, 색상을 한번 적용하면, 바꾸기 전 까지 해당 색을 유지한다는 의미이다.

fillStyle 예시

예시를 통해 fillStyle을 실제 그려보도록 하자.

See the Pen graphic by 13634816 (@13634816) on CodePen.

해당 예시는 for loop를 두 번 사용하여 4각형의 격자를 그리는 예시이다. 결과는 위에 나온 것과 동일하게 나올 것이며, 꼭 따라서 코딩해보기 바란다. 현재 RGB 값 중 R, G 값에 변수 i, j를 사용하여 값을 변경하도록 되어져 있다. 파란색은 고정으로 되어져 있으며, 값을 변경하며 4각형의 값을 달리하고 있는 것을 결과로 볼 수 있을 것이다.

R은 고정인 상태에서, G, B만 변경해가며 색을 출력해보자.

strokeStyle 예시

위의 예시와 비슷하다. 채운 색을 변경하는 것이 아닌 stroke 즉 윤곽선 색을 변경한다. 이번에는 사각형이 아닌 우리가 이전 포스팅에서 배운 arc()를 이용해 원을 그려보자.

See the Pen graphic by 13634816 (@13634816) on CodePen.

해당 예시를 통해 R은 고정한 상태로 G B를 바꿔가는 것을 해보자. 그리고, arc() 그리는 방법을 확인해보도록 하자.

투명도

우리가 사용하는 캔버스에는 투명도를 활용한 도형을 그릴 수 있다. 투명도 값을 조절함에서 불투명한 도형도 그릴 수 있고, 반투명한 도형도 그릴 수 있다.

우리는 투명도를 조절하기 위해 globalAlpha 값을 설정하거나, 윤곽선 또는 채움 스타일에 투명도 색상을 조절하는 방법을 이용한다.

globalAlpha = transparencyValue

해당 값을 적용하게 되면, 설정된 이후 캔버스에 그려지는 모든 도형의 투명도가 변경되게 된다. 초기 값은 1.0으로 완전한 불투명으로 설정되어져 있지만, transparencyValue는 0.0 ~ 1.0 사이 값을 줄 수 있다.

globalAlpha 같은 경우 모든 도형이 같은 투명도로 그려질 때, 사용하면 유용하다. 말그대로 전역적으로 동작하기 때문이다.

만약 일부 특정한 도형만 투명도 있게 그리고 싶을 경우 storokeStyle, fillStyle의 <color> 값을 활용하자. 우리는 이전에 rgb() 값으로 color를 전달했다. 하지만 rgba()라는 함수가 있으며, 해당함수의 마지막 인자는 투명도 값을 전달하는 것이다.

// 투명도 값 예시

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

globalAlpha 예시

아래의 예시를 확인해보자.

See the Pen graphic by 13634816 (@13634816) on CodePen.

해당 예시에서는, 4가지 다른 색을 가진 사각형을 배경으로 해 그린다. 그 위에 (75, 75) 지점을 중심으로 원을 그린다. 여기서 원이 반 투명하게 여러개 그려지는 것을 잘 보자.

우리는 원을 그리기 이전에 globalAlpha 값을 조절해 전체적인 도형의 그림의 반 투명도를 0.2로 설정했다. 따라서, 모든 원이 반 투명하게 그려지는 것을 볼 수 있다. 해당 예씨에서는 for loop를 활용해 점점 큰 반지름의 원을 그린다. 따라서, 원이 점점 겹쳐지면서 불투명해지는 것을 볼 수 있다.

rgba()를 활용한 예시

rgba()를 활용한 예시를 보자.

See the Pen graphic by 13634816 (@13634816) on CodePen.

위의 예제와 비슷한 일을 하지만, 원을 그리는 것 대신 불투명한 사각형을 그리는 방식으로 예시를 표현했다. 각각의 도형마다 투명도를 다르게 주는 방식을 사용했으며, 사각형이 처음에는 진했다가 마지막에는 연해지는 것을 볼 수 있다.

 ctx.fillStyle = 'rgba(255,255,255,'+(i+1)/10+')';

위의 코드가 투명도를 조절하는 방법이라는 것을 기억하자.

선 모양

선 모양을 변경하는 함수가 몇 가지 존재한다.

이제부터 위의 함수들을 예시와 함께 알아보자.

너무 길면 힘드니, 한 템포 쉬고 여기를 클릭해 다음 포스팅을 보도록 하자! 😳