JavaScriptでグラフィックス領域を作る方法-フロントエンドQ&A-php.cn

JavaScriptでグラフィックス領域を作る方法

PHPz

リリース： 2023-04-24 09:22:32

オリジナル

866 人が閲覧しました

インターネットとモバイルデバイスの普及に伴い、Web 開発やモバイルアプリケーション開発において JavaScript がますます一般的になってきています。しかし、JavaScript ではグラフィックの面積を計算して描画できることを知らない人も多いかもしれません。この記事では、JavaScript を使用してグラフの面積を計算して描画する方法を説明します。

長方形の面積

まず、最も単純な形状である長方形から始めましょう。長方形の面積を計算する公式は、長さと幅を掛けるのと同じくらい簡単です。 JavaScript では、次のコードを使用して四角形の面積を計算できます:

function calculateRectangleArea(length, width) {
  return length * width;
}

console.log(calculateRectangleArea(5, 10)); // 输出50

ログイン後にコピー

上記のコードでは、2 つのパラメーターを受け入れる calculateRectangleArea という名前の関数を定義しますlength と width は、それぞれ長方形の長さと幅を表します。関数によって返される結果は、長方形の面積です。

長方形の面積を計算したので、CSS と HTML Canvas API を使用して長方形を描画できます。以下に例を示します。

<!DOCTYPE html>
<html>
<head>
  <style>
    #myCanvas {
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <canvas id="myCanvas"></canvas>
  <script>
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");
    
    const rectangleWidth = 100;
    const rectangleHeight = 50;
    const rectangleArea = calculateRectangleArea(rectangleWidth, rectangleHeight);
    
    ctx.fillRect(0, 0, rectangleWidth, rectangleHeight);
    
    ctx.font = "16px Arial";
    ctx.fillStyle = "#000";
    ctx.textAlign = "center";
    ctx.fillText(`矩形面积: ${rectangleArea}`, rectangleWidth / 2, rectangleHeight / 2);
  </script>
</body>
</html>

ログイン後にコピー

上記のコードでは、まず HTML 内に myCanvas という名前の Canvas 要素を作成します。次に、JavaScript を使用してキャンバス要素を取得し、2d コンテキストを取得して、キャンバス上にグラフィックを描画できるようにします。

次に、長方形の長さと幅を定義し、前に作成した calculateRectangleArea 関数を使用して長方形の面積を計算しました。次に、fillRect メソッドを使用して、キャンバス上に四角形を描画します。最後に、fillText メソッドを使用して、四角形の領域をキャンバスに書き込みます。

円の面積

次に、円の面積を計算して描く方法を見てみましょう。 JavaScript では、次の式を使用して円の面積を計算できます: $S = \pi r^2$。

円を描くには、HTML5 の Canvas API で提供されている arc メソッドを使用できます。以下に例を示します。

<!DOCTYPE html>
<html>
<head>
  <style>
    #myCanvas {
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <canvas id="myCanvas"></canvas>
  <script>
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");
  
    const radius = 50;
    const circleArea = Math.PI * Math.pow(radius, 2);
  
    ctx.beginPath();
    ctx.arc(canvas.width / 2, canvas.height / 2, radius, 0, 2 * Math.PI);
    ctx.fillStyle = "#FF0000";
    ctx.fill();
  
    ctx.font = "16px Arial";
    ctx.fillStyle = "#000";
    ctx.textAlign = "center";
    ctx.fillText(`圆形面积: ${circleArea.toFixed(2)}`, canvas.width / 2, canvas.height / 2);
  </script>
</body>
</html>

ログイン後にコピー

上記のコードでは、まず myCanvas 要素を取得し、2d コンテキストを取得します。次に、円の半径を定義し、式を使用して円の面積を計算しました。次に、beginPath メソッドを使用して円の描画を開始し、arc メソッドを使用して円を描画します。最後に、fillText メソッドを使用して、円の領域をキャンバスに書き込みます。

三角形の面積

次に、三角形の面積を計算して描画する方法を見てみましょう。 JavaScript では、次の式を使用して三角形の面積を計算できます: $S = \frac{1}{2} b * h$。このうち、$b$は三角形の底辺を表し、$h$は三角形の高さを表します。

三角形を描画するには、Canvas API の moveTo メソッドと lineTo メソッドを使用できます。以下に例を示します。

<!DOCTYPE html>
<html>
<head>
  <style>
    #myCanvas {
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <canvas id="myCanvas"></canvas>
  <script>
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");
  
    const base = 100;
    const height = 50;
    const triangleArea = 0.5 * base * height;
  
    ctx.beginPath();
    ctx.moveTo(canvas.width / 2, 0);
    ctx.lineTo(canvas.width / 2 - base / 2, height);
    ctx.lineTo(canvas.width / 2 + base / 2, height);
    ctx.fillStyle = "#FF0000";
    ctx.fill();
  
    ctx.font = "16px Arial";
    ctx.fillStyle = "#000";
    ctx.textAlign = "center";
    ctx.fillText(`三角形面积: ${triangleArea}`, canvas.width / 2, height / 2);
  </script>
</body>
</html>

ログイン後にコピー

上記のコードでは、三角形の底辺と高さを定義し、式を使用して三角形の面積を計算します。次に、beginPath メソッドを使用して三角形の描画を開始し、moveTo メソッドと lineTo メソッドを使用して三角形の 3 つの点を接続します。最後に、fillText メソッドを使用して、三角形の領域をキャンバスに書き込みます。

概要

この記事では、JavaScript を使用してグラフの面積を計算して描画する方法を学びました。 HTML Canvas API を使用して、長方形、円、三角形の面積を計算し、描画する方法を示しました。この記事があなたのお役に立ち、JavaScript の魅力をより深く体験していただければ幸いです。

以上がJavaScriptでグラフィックス領域を作る方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。