フロントエンドでの実心半円と空心半円の実装方法

フロントエンド開発では、時々半円を使用するシーンに出くわすことがあります。例えば、クーポンのデザインなどで以下のような例があります：

クーポンの例

この記事では、異なる技術を使って実心半円と空心半円をどのように実装するかを説明します。主に3つの方法—CSS、SVG、Canvas—をカバーし、それぞれの方法について詳細なコード例と解説を提供します。

実心半円の実装

CSSを使用する

適切な border-radius 設定を使用することで、実心半円を作成できます。以下のように実装します：

1
<div class="square-solid-half-circle"></div>
2


3
<style>
4
  .square-solid-half-circle {
5
    width: 100px;
6
    height: 50px; /* 半円の高さ */
7
    background-color: #3498db;
8
    border-top-left-radius: 50px;
9
    border-top-right-radius: 50px;
10
  }
11
</style>

cssで実装した実心半円

解説:

  • width と height は幅と高さを設定します。
  • background-color は半円の塗りつぶし色を設定します。
  • border-top-left-radius と border-top-right-radius は円角を設定し、半円の形状にします。

SVGを使用する

SVGは半円を正確に描画する機能を提供します。以下は実心半円のコード例です：

1
<svg width="100" height="50">
2
  <path d="M 0 50 A 50 50 0 0 1 100 50" fill="#3498db" />
3
</svg>

解説:

  • path 要素の A 指令は半円弧を描画し、fill は塗りつぶし色を設定します。

Canvasを使用する

Canvas APIを使用してJavaScriptで動的に図形を描画できます。以下は実心半円の実装例です：

1
<canvas id="solid-half-circle" width="100" height="50"></canvas>
2


3
<script>
4
  const solidCanvas = document.getElementById("solid-half-circle");
5
  const solidCtx = solidCanvas.getContext("2d");
6


7
  solidCtx.beginPath();
8
  solidCtx.arc(50, 50, 50, Math.PI, 0, false); // 中心 (50,50), 半径 50, π から 0 までの弧
9
  solidCtx.fillStyle = "#3498db"; // 塗りつぶし色の設定
10
  solidCtx.fill(); // パスを塗りつぶす
11
</script>

canvasで実装した実心半円

解説:

  • arc メソッドは半円の弧線を描画し、fillStyle は塗りつぶし色を設定し、fill メソッドで実心半円を塗りつぶします。

空心半円の実装

CSSを使用する

正方形のボーダーカラーを設定し、下のボーダーと右のボーダーを透明にし、回転させることで空心半円を実装できます。以下はそのコードです：

1
<div class="square-hollow-half-circle"></div>
2


3
<style>
4
  .square-hollow-half-circle {
5
    width: 100px;
6
    height: 100px;
7
    border: 5px solid #3498db; /* ボーダーカラーと幅の設定 */
8
    border-radius: 100%; /* ボーダーを円形に */
9
    border-bottom-color: transparent; /* 下のボーダーを透明に */
10
    border-right-color: transparent;
11
    box-sizing: border-box; /* ボーダーを含めて幅と高さを計算 */
12
    transform: rotate(45deg); /* 45度回転 */
13
  }
14
</style>

cssで実装した空心半円

解説:

  • border はボーダーを設定し、border-radius は円形にします。
  • border-bottom-color と border-right-color を透明にしてボーダーを隠します。
  • transform: rotate(45deg) は回転を実現します。

SVGを使用する

SVGでは、2つのパス—大きな半円と小さな半円のマスク—を使用して空心半円を実装します：

1
<svg width="100" height="50">
2
  <!-- 実心半円 -->
3
  <path d="M 0 50 A 50 50 0 0 1 100 50 L 0 50 Z" fill="#3498db" />
4
  <!-- 覆い隠す白い半円 -->
5
  <path d="M 5 50 A 45 45 0 0 1 95 50 L 5 50 Z" fill="#ffffff" />
6
</svg>

解説:

  • 最初の path 要素が実心半円を描画します。
  • 2番目の path 要素が小さな白い半円を描画し、大きな半円の上にマスクを形成します。

Canvasを使用する

同様に、Canvasでは2つの arc を使用して外円と内円を描画し、空心半円を実装します：

1
<canvas id="canvas-hollow-half-circle-overlay" width="100" height="50"></canvas>
2


3
<script>
4
  const canvasOverlay = document.getElementById(
5
    "canvas-hollow-half-circle-overlay",
6
  );
7
  const ctxOverlay = canvasOverlay.getContext("2d");
8


9
  // 実心半円
10
  ctxOverlay.beginPath();
11
  ctxOverlay.arc(50, 50, 50, Math.PI, 0, false);
12
  ctxOverlay.fillStyle = "#3498db";
13
  ctxOverlay.fill();
14


15
  // 覆い隠す白い半円
16
  ctxOverlay.beginPath();
17
  ctxOverlay.arc(50, 50, 45, Math.PI, 0, false);
18
  ctxOverlay.fillStyle = "#ffffff";
19
  ctxOverlay.fill();
20
</script>

canvasで実装した空心半円

解説:

  • 外円の実心半円を描画し、その上に小さな白い半円を描画して空心効果を形成します。

以上の方法で、フロントエンドで実心半円と空心半円のさまざまな効果を実装できます。

似た投稿

Alibaba Cloud サーバーでの Let’s Encrypt 証明書のインストールと更新

Alibaba Cloud サーバーでの Let’s Encrypt 証明書のインストールと更新

ブログの作成方法：包括的ガイドとプラットフォームの分析

ブログの作成方法：包括的ガイドとプラットフォームの分析