HOWTO · JavaScript
JavaScript の fillRect()関数
この記事は、JavaScript での fillRect メソッドの動作を理解するのに役立ちます。
このページの内容
この記事では、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）から始まります。
出力：
