HTML 캔버스의 strokeStyle 속성은 도형의 윤곽선(스트로크)에 적용할 색상, 그라디언트 또는 패턴을 지정하는 데 사용됩니다. <canvas> 요소는 JavaScript를 활용해 웹 페이지 위에 다양한 그래픽을 직접 그릴 수 있게 해주며, 각 캔버스는 width와 height 속성을 통해 너비와 높이를 정의합니다.
strokeStyle 속성 문법
strokeStyle 속성의 기본 문법은 다음과 같습니다.
context.strokeStyle = color | gradient | pattern;
각 값의 의미는 아래와 같습니다.
- color − 도형 윤곽선에 적용할 색상을 지정합니다. HEX 코드, RGB, RGBA, 색상 이름 등을 사용할 수 있습니다.
- gradient − 그라디언트 효과가 있는 선을 만들기 위한 선형(linear) 또는 원형(radial) 그라디언트 객체입니다.
- pattern − 반복되는 이미지 패턴으로 윤곽선을 채우기 위한 패턴 객체입니다.
예제: 그라디언트 스트로크 사각형 그리기
다음 예제는 createLinearGradient() 메서드로 생성한 그라디언트 객체를 strokeStyle 속성에 적용하여, 색상이 점진적으로 변하는 사각형 윤곽선을 그리는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<body>
<canvas id="newCanvas" width="550" height="400" style="border: 2px solid orange;"></canvas>
<script>
var c = document.getElementById("newCanvas");
var ctx = c.getContext("2d");
// (150, 0)에서 (280, 0)까지 가로 방향 선형 그라디언트 생성
var grad = ctx.createLinearGradient(150, 0, 280, 0);
grad.addColorStop("0", "orange"); // 시작 지점: 주황색
grad.addColorStop("0.5", "blue"); // 중간 지점: 파란색
grad.addColorStop("1.0", "green"); // 끝 지점: 초록색
// 그라디언트를 윤곽선 스타일로 지정
ctx.strokeStyle = grad;
// 윤곽선 두께를 20px로 설정
ctx.lineWidth = 20;
// 사각형 윤곽선 그리기
ctx.strokeRect(150, 120, 240, 100);
</script>
</body>
</html>
실행 결과
위 코드를 실행하면 주황색에서 파란색, 그리고 초록색으로 자연스럽게 전환되는 그라디언트 윤곽선의 사각형이 캔버스에 그려집니다.
정리
strokeStyle 속성은 단순한 단색뿐 아니라 그라디언트와 패턴 객체도 지원하기 때문에, 캔버스 그래픽에 풍부한 시각적 효과를 더하고 싶을 때 매우 유용합니다. 특히 addColorStop() 메서드를 활용하면 여러 색상을 자유롭게 조합해 다채로운 윤곽선을 표현할 수 있습니다.