[HTML, JS] Canvas(캔버스) 사용하기 2 - 사각형 만들기

지난 포스팅에 이어서 이번에는 사각형 만드는 함수를 알아보려한다.

 

우선 지난번처럼 아래와 같이 초기 설정 미리 해주고,

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
canvas.width = 800;
canvas.height = 800;

변수 ctx를 호출해서 사용하겠다.

 

1️⃣ rect()

rect(x좌표, y좌표, x길이, y길이)

rect 함수는 사각형을 만들 때 사용한다.

파라미터로는 위와 같이 4개를 받는다.

 

x좌표와 y좌표는 사각형을 그릴 첫 꼭짓점의 좌표를 지정한다.

그리고 x길이와 y길이는 위에서 지정한 좌표에서부터 가로 너비와 세로 너비를 얼마만큼 가질지를 지정한다.

 

예시)

ctx.strokeStyle = "red"
ctx.rect(350, 400, 80, 100);
ctx.stroke();

 

 

위 코드를 해석하면 (x, y) 좌표가 (350, 400)인 위치에서 가로로 80, 세로로 100만큼의 너비를 가진 사각형을 만든다는 뜻이다.

이렇게 한줄의 코드로 사각형을 만들 수 있다.

 

물론, 첫번째 포스팅 때 배운 lineTo와 moveTo 메서드를 활용해도 그릴 수도 있다.

위 함수를 moveTo()와 lineTo() 메소드로 표현하면,

 

ctx.moveTo(350, 400);
ctx.lineTo(430, 400);
ctx.lineTo(430, 500);
ctx.lineTo(350, 500);
ctx.lineTo(350, 400);
ctx.stroke();

 

이렇게 된다.

근데 이렇게 하면 moveTo 메소드로 사각형의 시작 지점을 지정하고,

네 변을 모두 lineTo 메소드로 그려야하므로 총 5줄의 코드가 필요하다.

 

하지만 이 rect 메서드를 사용하면 단 한줄의 코드로 사각형을 그릴 수 있다.

 

 

2️⃣ fill()

fill은 stroke와 함께 출력 메서드로, 앞서 그린 그림을 출력하라는 메서드이다.

도형을 그린 후 fill 메소드를 사용하면 해당 도형 내부가 색칠된 채로 출력된다.

 

예시)

ctx.moveTo(200, 200);
ctx.lineTo(500, 200);
ctx.lineTo(500, 500);
ctx.lineTo(200, 500);
ctx.lineTo(200, 200);
ctx.fill();

스타일을 따로 지정하지 않으면 기본값은 블랙이다.

스타일을 지정해주려면 fillStyle 속성 값을 지정해주면 된다.

 

예시)

ctx.moveTo(200, 200);
ctx.lineTo(500, 200);
ctx.lineTo(500, 500);
ctx.lineTo(200, 500);
ctx.lineTo(200, 200);
ctx.fillStyle = "green";
ctx.fill();

 

 

3️⃣ fillRect(), stokeRect()

사각형 그리기 함수인 rect와 그것을 어떻게 그릴 것인지 지정하는 fill과 stroke 함수를 융합한 메서드이다.

도형을 그리는 동시에 출력하는 기능을 한다.

 

주의할점이라면 fillRect 메소드는 이미 fill이 포함되어 있는 메서드이므로 도형을 호출하기 전에 스타일을 지정해줘야 먹힌다.

fillRect나 strokeRect를 호출하고 나서 스타일을 지정하면 적용되지 않는다.

 

예시)

ctx.fillStyle = "yellow";
ctx.fillRect(200, 200, 300, 300);