JavaScript の fillRect()関数

Shiv Yadav 2024年2月15日

JavaScript JavaScript Method

この記事では、JavaScript の fillRect() 関数を使用して、キャンバス上に定義された幅と高さの長方形を作成する方法を学習します。

JavaScript で `fillRect()` 関数を使用する

HTML キャンバスの fillRect() 関数は、Web ページ上に塗りつぶされた長方形を生成します。黒がデフォルトの色です。JavaScript を使用すると、canvas 要素を使用して Web ページに絵を描くことができます。

すべてのキャンバスには、高さと幅、高さと幅をそれぞれ示す 2つのコンポーネントが含まれています。

構文：

obj.fillRect(a, b, width, height);

a は長方形の始点の x 軸位置であり、b は長方形の始点の y 軸位置です。width は長方形の幅であり、正と負の両方が可能です。正の値は右側に表示され、負の値は左側に表示されます。

height は長方形の高さであり、正または負のいずれかになります。正の値は減少し、負の値は増加しています。

サンプルコード：

<!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() メソッドを使用して、canvas 要素を選択します。ブラウザが canvasAPI をサポートしているかどうかを確認します。

2D 図面コンテキストオブジェクトを取得します。塗りつぶしのスタイルを #800080、purple の色に変更し、fillRect() 関数を使用して長方形を描画します。

長方形の幅は 200 ピクセル、高さは 250 ピクセルで、（50、50）から始まります。

出力：

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.

JavaScript で fillRect() 関数を使用する

関連記事 - JavaScript Method

JavaScript で `fillRect()` 関数を使用する