JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで円を描く方法とは？Canvas APIを使ったサンプルコード付き解説

JavaScriptで図形を描画するには、HTML5の<canvas>要素とCanvas APIを利用するのが一般的です。円を描く場合は、getContext("2d")で取得した2D描画コンテキストに対して、arc()メソッドを使用します。

以下は、ボタンをクリックするとキャンバス上に円が描かれるサンプルコードです。

サンプルコード

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .circleCanvas {
        border: 3px solid #110101;
    }
</style>
</head>
<body>
<h1>Draw a circle in JavaScript</h1>
<canvas class="circleCanvas" width="400" height="200"></canvas><br />
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to create a circle in the above canvas element</h3>
<script>
    let canvasEle = document.querySelector(".circleCanvas");
    let BtnEle = document.querySelector(".Btn");
    BtnEle.addEventListener("click", () => {
        var circle = canvasEle.getContext("2d");
        circle.beginPath();
        circle.arc(180, 100, 90, 0, 2 * Math.PI);
        circle.stroke();
    });
</script>
</body>
</html>

コードのポイント

  • beginPath()：新しいパスを開始し、これまでの描画内容と区切ります。
  • arc(x, y, 半径, 開始角, 終了角)：中心座標（180, 100）、半径90の円弧を定義します。開始角を「0」、終了角を「2 × Math.PI」（360度）に指定することで、完全な円になります。
  • stroke()：定義したパスに沿って実際に線を描画します。
  • addEventListener("click", ...)：ボタンがクリックされたタイミングで描画処理を実行します。

実行結果

上記のコードを実行すると、ブラウザには次のように表示されます。

JavaScriptで円を描く方法とは？Canvas APIを使ったサンプルコード付き解説

「CLICK HERE」ボタンをクリックすると、キャンバス要素の中に黒い輪郭の円が描画されます。

JavaScriptで円を描く方法とは？Canvas APIを使ったサンプルコード付き解説

  1. SVGで中空の円（輪郭のみの円）を描く方法を解説

    SVGで中空の円（塗りつぶしなしの輪郭だけの円）を描くには、<circle>要素を使用します。ポイントは、fill=noneを指定して内側を透明にし、stroke属性で輪郭線を描画することです。SVGとは？SVG（Scalable Vector Graphics）は、XMLを使って2Dグラフィックスやグラフィカルアプリケーションを記述するための言語です。記述されたXMLはSVGビューアによってレンダリングされます。現在の主要なWebブラウザのほとんどは、PNG・GIF・JPGなどの画像形式と同じようにSVGを表示できます。サンプルコード以下のコードを実行すると、SVGで中空の円を描

  2. JavaとOpenCVで円を描画する方法を徹底解説

    Java版OpenCVライブラリの org.opencv.imgproc パッケージには、Imgproc というクラスが含まれています。画像に円を描きたい場合は、このクラスが提供する circle() メソッドを呼び出します。このメソッドは以下のパラメータを受け取ります。Matオブジェクト：円を描画する対象となる画像を表します。Pointオブジェクト：円の中心座標を表します。int型の値：円の半径を表します。Scalarオブジェクト：円の色を表します。OpenCVでは色の指定順序がRGBではなくBGR（青・緑・赤）である点に注意してください。int型の値：円の輪郭線の太さを表します。デフォルト