자바스크립트 Canvas - fillRect() 함수로 직사각형 & 정사각형 그리기

fillRect() 함수 사용법: fillRect(x, y, 너비, 높이)

 

도형 기본 색은 검은색

도형 채우는 색 변경 시 ctx.fillStyle property 값을 변경

(예: ctx.fillStyle = 'blue')

단점은 도형의 윤곽선 색 변경은 불가(하지만 rect()와 fill() 함수를 이용한 윤곽선 색 변경 가능, 맨 밑 참고)

// 너비 100, 높이 50 직사각형
ctx.fillRect(0, 100, 100, 50);
 
// 너비 100, 높이 100 정사각형
ctx.fillRect(150, 100, 100, 100);
 
// fillStyle property에 파란색 값을 할당
ctx.fillStyle = 'blue';
ctx.fillRect(300, 100, 100, 100);
 
// fillStyle 현재 값은 파란색이니 파란색으로 채워짐
ctx.fillRect(450, 100, 100, 100);
 
// fillStyle property에 검은색 값을 할당
ctx.fillStyle = 'black'
ctx.fillRect(600, 100, 100, 100);
 
// 너비 50, 높이 50 도형 지우개
ctx.clearRect(600, 100, 50, 50)

코드 실행결과를 왼쪽부터 나열

clearRect() 함수는 도형을 하얀색으로 칠하는 것이 아님.

clearRect() 함수로 정해진 부분을 canvas의 색에 맞게 뒤덮음.

canvas의 background-color가 노란색일 경우 clearRect() 함수는 정해진 부분을 하얀색으로 칠하지 않고 노란색으로 칠함. 

 

canvas의 background-color만 바꾼 결과

clearRect() 함수가 자동으로 노란색으로 칠해짐

 

 

윤곽선과 채우는 색 변경 시 코드

// 채우는 색을 파란색
ctx.fillStyle = 'blue';
// 윤곽선 색을 빨간색
ctx.strokeStyle = 'red';
// 윤곽선 폭을 10
ctx.lineWidth = 10;
// rect() 함수로 도형 위치 및 크기 정하기
ctx.rect(100, 100, 100, 100);
// 도형 채우기
ctx.fill();
// 윤곽선 그리기
ctx.stroke();

윤곽선 변경 가능

 

 

하지만 fill() stroke() 둘 중 어느 함수 우선 호출에 따라 도형 윤곽선에 차이가 있음.

 

좌측 fill() 우선 호출 시 , 우측 stroke() 우선 호출 시

이런 결과의 이유는 fill() 우선 호출 시 stroke() 함수가 fill() 호출로 그려진 도형을 덮기 때문

stroke() 우선 호출도 동일한 이유.

다음 포스팅에서 해결법 제시할 예정.