HTML 캔버스의 strokeRect() 메서드는 웹 페이지에 사각형의 외곽선을 그리는 데 사용됩니다. <canvas> 요소는 JavaScript를 활용해 웹 페이지 위에 다양한 그래픽을 직접 그릴 수 있게 해주는 강력한 도구입니다.
캔버스의 기본 구조
모든 캔버스는 크기를 정의하는 두 가지 속성을 가지고 있습니다. 바로 캔버스의 세로 길이를 나타내는 height와 가로 길이를 나타내는 width입니다. 이 두 속성을 통해 그림을 그릴 영역의 크기를 자유롭게 설정할 수 있습니다.
strokeRect() 메서드 문법
strokeRect() 메서드의 기본 문법은 다음과 같습니다.
context.strokeRect(p, q, width, height);
각 매개변수의 의미는 아래와 같습니다.
- p − 사각형 왼쪽 상단 모서리의 x 좌표
- q − 사각형 왼쪽 상단 모서리의 y 좌표
- width − 사각형의 너비
- height − 사각형의 높이
즉, 시작점(x, y)을 기준으로 지정한 너비와 높이만큼 사각형의 테두리 선이 그려집니다. 내부를 채우지 않고 외곽선만 표시한다는 점에서 fillRect() 메서드와 차이가 있습니다.
예제 코드
이제 strokeRect() 메서드를 실제로 활용한 예제를 살펴보겠습니다.
<!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");
ctx.strokeRect(120, 120, 220, 120);
</script>
</body>
</html>코드 설명
위 예제에서는 먼저 가로 550px, 세로 400px 크기의 캔버스를 생성하고 주황색 테두리로 영역을 표시했습니다. 이후 getContext("2d") 메서드로 2D 드로잉 컨텍스트를 가져온 뒤, strokeRect(120, 120, 220, 120)을 호출하여 x 좌표 120, y 좌표 120 위치에서 시작하는 너비 220px, 높이 120px 크기의 사각형 외곽선을 그립니다.
실행 결과
위 코드를 실행하면 캔버스 안에 검은색 외곽선으로 이루어진 사각형이 화면에 나타납니다.
마무리
strokeRect() 메서드는 캔버스 그래픽의 기본이 되는 도형 그리기 기능입니다. lineWidth로 선 굵기를 조절하거나 strokeStyle로 선 색상을 변경하는 등 다른 캔버스 속성과 함께 활용하면 더욱 다양하고 풍부한 그래픽 표현이 가능합니다.