JavaScriptを使用して正方形を描く方法

JavaScript を使用して正方形を描画するのは簡単です。通常の描画 API を知っていれば十分です。次の記事では、JavaScript Canvas API を使用して正方形を描画する方法を説明します。

ステップ 1: キャンバス要素を作成する

まず、HTML ページに正方形を描くキャンバス要素を作成する必要があります。次のコードを使用できます。

<canvas id="myCanvas" width="200" height="200"></canvas>

このうち、id パラメータは Canvas 要素を一意に識別するために使用され、width パラメータと height パラメータは Canvas 要素のサイズを設定するために使用されます。

ステップ 2: Canvas 要素を取得する

JavaScript では、document.getElementById() メソッドを使用して Canvas 要素を取得する必要があります。次のように、id パラメータに基づいてこのメソッドに渡すことができます。

const canvas = document.getElementById("myCanvas");

Canvas 要素を取得したので、次に Canvas 描画コンテキストを使用して描画する必要があります。

ステップ 3: 正方形を描く

正方形の 4 つの点を指定することで正方形を描くことができます。正方形を描くには、左上隅と右下隅の座標を指定する必要があります。次のコードを使用して、赤い四角形を描画できます。

const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.fillStyle = "red";
ctx.fillRect(50, 50, 100, 100);

このコードでは、最初にキャンバスの描画コンテキストを取得します。次に、塗りつぶしの色（赤）を使用して正方形の色を設定します。位置 50、50 から開始し、幅と高さを 100 に指定すると、100x100 の正方形が正常に作成されました。

ステップ 4: インタラクティブ性を実装する

インタラクティブ性を高めるために、JavaScript の AttachEvent メソッドを使用してマウス イベントをキャンバス要素にバインドできます。こうすることで、ユーザーがキャンバス要素をクリックしたときに、別の正方形を描画できます。完全な実装コードは次のとおりです:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
canvas.addEventListener("click", handleClick);

function handleClick(event) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.fillStyle = "red";
  ctx.fillRect(50, 50, 100, 100);
  ctx.beginPath();
  ctx.fillStyle = "blue";
  ctx.fillRect(150, 150, 50, 50);
}

この例では、キャンバス要素のクリック イベント リスナーを設定します。ユーザーがクリックすると、キャンバスをクリアし、新しい位置に青いキャンバスを描画します。 。

概要

この記事では、JavaScript で Canvas API を使用して正方形を描画する方法を説明しました。ここでは、JavaScript で正方形を描画するための基本的な知識のみを説明します。これに加えて、パス、線、シェーディングなど、描画に使用できる他の方法もあります。ただし、基本を理解すれば、他の方法を習得するのは難しくありません。次に、より複雑な描画方法に進み、HTML および JavaScript の開発エクスペリエンスを充実させることができます。

以上がJavaScriptを使用して正方形を描く方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。