JavaScript에서 canvas를 통한 사각형 그리기
정사각형과 직사각형은 반드시
moveTo와 lineTo의 조합으로
그릴 필요는 없습니다 - 이를 위한 더 간단한 메서드들이 있습니다.
함께 알아보겠습니다.
strokeRect 메서드
strokeRect(x, y, 너비,
높이) 메서드는 주어진 지점에 직사각형의 윤곽선을
그립니다. 처음 두 매개변수는 그려질 직사각형의
왼쪽 상단 모서리가 위치할 점의 좌표를 지정합니다.
strokeRect를 사용하여 직사각형을 그려봅시다
(ctx가 이미 있다고 가정합니다):
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.strokeRect(50, 50, 100, 75);
:
fillRect 메서드
fillRect(x, y, 너비, 높이)
메서드는 strokeRect와 유사하게 작동하지만,
채워진 직사각형을 그립니다.
예제를 통해 확인해 봅시다:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.fillRect(50, 50, 100, 75);
:
rect 메서드
다음 메서드인 rect(x, y, 너비,
높이)도 직사각형을 그립니다. 하지만
이 직사각형은 stroke 또는 fill 메서드를
적용해야만 보이게 됩니다.
첫 번째 경우에는 윤곽선이, 두 번째 경우에는
채워진 도형이 됩니다.
rect를 사용하여 윤곽선을 그려봅시다:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.rect(50, 50, 100, 75);
ctx.stroke();
:
이제 채워진 도형을 그려봅시다:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.rect(50, 50, 100, 75);
ctx.fill();
:
clearRect 메서드
다음 메서드인 clearRect(x, y,
너비, 높이)는 지우개처럼 작동하여
직사각형 영역을 지우고 그 내용을
완전히 투명하게 만듭니다.
fillRect로 작은 사각형을 그리고
clearRect를 사용하여 일부를 지워봅시다:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.fillRect(50, 50, 100, 100);
ctx.clearRect(75, 75, 50, 50);
:
