JavaScript의 fillRect() 함수

Shiv Yadav 2024년2월15일

JavaScript JavaScript Method

이 기사에서는 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픽셀입니다.

출력:

JavaScript에서 fillRect() 함수 사용

작가: Shiv Yadav

Shiv is a self-driven and passionate Machine learning Learner who is innovative in application design, development, testing, and deployment and provides program requirements into sustainable advanced technical solutions through JavaScript, Python, and other programs for continuous improvement of AI technologies.