HOWTO · JavaScript
JavaScript의 fillRect() 함수
이 기사는 JavaScript에서 fillRect 메소드의 작동을 이해하는 데 도움이 될 것입니다.
이 기사에서는 JavaScript fillRect() 함수를 사용하여 캔버스에 너비와 높이가 정의된 사각형을 만드는 방법을 배웁니다.
JavaScript에서 fillRect() 함수 사용
HTML 캔버스의 fillRect() 함수는 웹 페이지에 채워진 직사각형을 생성합니다. 검정색은 기본 색상입니다. JavaScript를 사용하면 canvas 요소를 사용하여 웹 페이지에 그림을 그릴 수 있습니다.
모든 캔버스에는 높이와 너비, 높이와 너비를 각각 나타내는 두 개의 구성 요소가 있습니다.
통사론:
obj.fillRect(a, b, width, height);
a는 Rectangle 시작점의 x축 위치이고 b는 Rectangle 시작점의 y축 위치입니다. width는 양수 및 음수 모두가 될 수 있는 직사각형의 너비입니다. 여기서 양수 값은 오른쪽에 표시되고 음수 값은 왼쪽에 표시됩니다.
height는 Rectangle의 높이이며 양수 또는 음수일 수도 있습니다. 양수 값은 감소하고 음수 값은 증가합니다.
예제 코드:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>fillRect</title>
</head>
<body>
<h1>fillRect canvas JavaScript</h1>
<canvas id="canvas" height="300" width="300">
</canvas>
</body>
<script>
function drRect() {
const canva = document.querySelector('#canvas');
if (!canva.getContext) {
return;
}
const rect = canva.getContext('2d');
rect.fillStyle = '#800080';
rect.fillRect(50, 50, 200, 250);
}
drRect();
</script>
</html>
document.querySelector() 메서드를 사용하여 캔버스 요소를 선택합니다. 브라우저가 캔버스 API를 지원하는지 확인합니다.
2D 드로잉 컨텍스트 개체를 가져옵니다. 채우기 스타일을 #800080, purple 색상으로 변경하고 fillRect() 함수를 사용하여 Rectangle을 그립니다.
Rectangle은 (50, 50)에서 시작하여 너비가 200픽셀이고 높이가 250픽셀입니다.
출력:
