ホーム » Web API » JavaScript fillRect

JavaScript fillRect

概要: このチュートリアルでは、JavaScript の fillRect() メソッドを使用して、指定された幅と高さの長方形をキャンバス上に描画する方法を学習します。

JavaScript fillRect() メソッドの概要

fillRect() は、2D 描画コンテキストオブジェクトのメソッドです。fillRect() メソッドを使用すると、キャンバス上に、指定された幅と高さで (x,y) 位置に塗りつぶされた長方形を描画できます。

fillRect() メソッドの構文を以下に示します。

ctx.fillRect(x,y,width,height);Code language: CSS (css)

この構文では

  • x は長方形の始点の x 軸座標です。
  • y は長方形の始点の y 軸座標です。
  • width は長方形の幅です。正または負の値にすることができます。正の値は右方向、負の値は左方向を示します。
  • height は長方形の高さです。正または負の値にすることができます。正の値は下方向、負の値は上方向を示します。

2D 描画コンテキストの fillStyle 属性は、長方形の塗りつぶしのスタイルを決定します。

JavaScript fillRect() の例

キャンバス要素を持つ index.html ファイルを以下に示します。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Canvas fillRect</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>

    <h1>JavaScript Canvas fillRect</h1>

    <canvas id="canvas" height="400" width="500">
    </canvas>

    <script src="js/index.js"></script>

</body>

</html>Code language: HTML, XML (xml)

app.js ファイル内の drawRectangles() 関数は、2 つの長方形を描画します。

function drawRectangles() {
    const canvas = document.querySelector('#canvas');

    if (!canvas.getContext) {
        return;
    }

    const ctx = canvas.getContext('2d');

    ctx.fillStyle = '#F9DC5C';
    ctx.fillRect(100, 100, 150, 100);

    ctx.fillStyle = 'rgba(0,0,255,0.5)';
    ctx.fillRect(200, 150, -150, -100);
}

drawRectangles();Code language: JavaScript (javascript)


動作方法。

最初に、document.querySelector() メソッドを使用して、キャンバス要素を選択します。

const canvas = document.querySelector('#canvas');
Code language: JavaScript (javascript)

次に、ブラウザがキャンバスAPIをサポートしているかどうかを確認します。

if (!canvas.getContext) {
    return;
}Code language: JavaScript (javascript)

次に、2D 描画コンテキストオブジェクトを取得します。

const ctx = canvas.getContext('2d');Code language: JavaScript (javascript)

次に、塗りつぶしのスタイルを #F9DC5C の色に設定し、fillRect() メソッドを使用して最初の長方形を描画します。

ctx.fillStyle = '#F9DC5C';
ctx.fillRect(100, 100, 150, 100);Code language: JavaScript (javascript)

最初の長方形は (100,100) から始まり、幅は 150 ピクセル、高さは 100 ピクセルです。

最後に、塗りつぶしのスタイルをアルファ値 0.5 の青に設定し、透明効果を作成します。そして、fillRect() メソッドを使用して2番目の長方形を描画します。

ctx.fillStyle = 'rgba(0,0,255,0.5)';
ctx.fillRect(200, 150, -150, -100);Code language: JavaScript (javascript)

2番目の長方形は (200,150) から始まります。負の幅と高さを fillRect() メソッドに渡したので、幅は左方向、高さは上方向になります。

出力結果を次の図に示します。

デモへのリンクはこちらです。.

JavaScript fillRect() を使用したレンガ壁の描画

この例では、fillRect() メソッドを使用してレンガ壁を描画する方法を学習します。

キャンバス要素を持つ index.html ファイルを以下に示します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Canvas fillRect</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>

    <h1>JavaScript fillRect() - Draw a Brick Wall</h1>

    <canvas id="canvas" height="400" width="500">
    </canvas>

  
  <script src="js/app.js"></script>

</body>

</html>Code language: HTML, XML (xml)

この例では、キャンバスは style.css ファイルで指定された次のスタイルを持ちます。


canvas {
    border: solid 1px #ccc;
    background-color: #000;
}Code language: CSS (css)

app.js ファイルでは、キャンバス上にレンガ壁を描画する drawWall() という関数を定義します。

function drawWall(ctx, canvasWidth, canvasHeight) {
    // define brick height and width, and spaces between them
    const bh = 20,
        bw = 50,
        space = 5;

    // calculate the rows and columns of the wall
    const rows = Math.ceil(canvasHeight / (bh + space));
    const columns = Math.ceil(canvasWidth / (bw + space));

    // draw columns
    for (let r = 0; r < rows; r++) {
        // draw rows
        for (let c = 0; c < columns; c++) {
            if (r % 2) {
                c == 0 ? ctx.fillRect(c * (bw + space), r * (bh + space), bw / 2, bh) :
                    ctx.fillRect(c * (bw + space) - bw / 2, r * (bh + space), bw, bh);
            } else {
                ctx.fillRect(c * (bw + space), r * (bh + space), bw, bh);
            }
        }
    }
}Code language: JavaScript (javascript)

drawWall() 関数は、2D 描画コンテキストと壁の高さおよび幅を受け取ります。

最初に、各レンガの高さ (bh) と幅 (bw)、そしてレンガ間のスペースを定義します。

const bh = 20,
      bw = 50,
      space = 5;Code language: JavaScript (javascript)

次に、レンガの寸法と壁の幅と高さに基づいて、レンガの行数と列数を計算します。

// calculate the rows and columns of the wall
const rows = Math.ceil(height / (bh + space));
const columns = Math.ceil(width / (bw + space));Code language: JavaScript (javascript)

次に、fillRect() メソッドを使用してレンガを描画します。2 つのfor ループを使用して、レンガを一行ずつ描画します。

// draw rows
for (let r = 0; r < rows; r++) {
    // draw columns
    for (let c = 0; c < columns; c++) {
        if (r % 2) {
            c == 0 ? ctx.fillRect(c * (bw + space), r * (bh + space), bw / 2, bh) :
                ctx.fillRect(c * (bw + space) - bw / 2, r * (bh + space), bw, bh);
        } else {
            ctx.fillRect(c * (bw + space), r * (bh + space), bw, bh);
        }
    }
}Code language: JavaScript (javascript)

偶数行の最初のレンガの幅は、通常のレンガの幅の半分になります。

出力結果を次の図に示します。

デモを示すリンクはこちらです。

まとめ

  • JavaScript の fillRect() を使用して、(x,y) から始まり、指定された幅と高さを持つ塗りつぶされた長方形を描画します。
  • fillStyle プロパティを使用して、長方形の塗りつぶしのスタイルを設定します。
このチュートリアルは役に立ちましたか？
JavaScript Canvas
前へ
JavaScript キャンバス
次へ
JavaScript strokeRect
JavaScript strokeRect