Varias maneras de implementar semicírculos sólidos y huecos en frontend

En el desarrollo frontend, a veces nos encontramos con la necesidad de usar semicírculos, por ejemplo, en cupones como se muestra en la imagen siguiente:

Este artículo discutirá cómo implementar semicírculos sólidos y huecos usando diferentes técnicas. Cubriremos tres métodos principales: CSS, SVG y Canvas. Cada método incluirá ejemplos de código detallados y explicaciones.

Implementación de semicírculo sólido

Usando CSS

Puedes crear un semicírculo sólido mediante el ajuste adecuado de border-radius. A continuación se muestra un ejemplo:

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

3
<style>
4
  .square-solid-half-circle {
5
    width: 100px;
6
    height: 50px; /* Altura igual a la mitad del radio del círculo */
7
    background-color: #3498db;
8
    border-top-left-radius: 50px;
9
    border-top-right-radius: 50px;
10
  }
11
</style>

Explicación:

• width y height definen el tamaño.
• background-color establece el color de relleno del semicírculo.
• border-top-left-radius y border-top-right-radius crean las esquinas redondeadas, formando el semicírculo.

Usando SVG

SVG permite dibujar semicírculos con precisión. Aquí está el código para un semicírculo sólido:

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

Explicación:

• El elemento path usa la instrucción A para dibujar el arco del semicírculo, con el atributo fill estableciendo el color de relleno.

Usando Canvas

La API de Canvas permite dibujar gráficos dinámicamente con JavaScript. Aquí está el código para un semicírculo sólido:

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); // Centro (50,50), radio 50, desde π a 0 radianes
9
  solidCtx.fillStyle = "#3498db"; // Establece el color de relleno
10
  solidCtx.fill(); // Rellena el camino
11
</script>

Explicación:

• El método arc dibuja el arco del semicírculo, fillStyle establece el color de relleno, y fill llena el semicírculo.

Implementación de semicírculo hueco

Usando CSS

Podemos crear un semicírculo hueco usando un cuadrado con borde y configurando los bordes inferior y derecho como transparentes, luego rotando el cuadrado. Aquí está el código:

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; /* Establece el color y el grosor del borde */
8
    border-radius: 100%; /* Hace que el borde sea circular */
9
    border-bottom-color: transparent; /* Oculta el borde inferior */
10
    border-right-color: transparent;
11
    box-sizing: border-box; /* Incluye el borde en el cálculo del tamaño */
12
    transform: rotate(45deg); /* Rota 45 grados */
13
  }
14
</style>

Explicación:

• border define el borde, border-radius lo convierte en un círculo.
• border-bottom-color y border-right-color se configuran como transparentes para ocultar los bordes.
• transform: rotate(45deg) rota el semicírculo.

Usando SVG

En SVG, puedes utilizar dos rutas, un semicírculo grande y un semicírculo pequeño para enmascarar el semicírculo hueco:

1
<svg width="100" height="50">
2
  <!-- Semicírculo sólido -->
3
  <path d="M 0 50 A 50 50 0 0 1 100 50 L 0 50 Z" fill="#3498db" />
4
  <!-- Semicírculo blanco superpuesto -->
5
  <path d="M 5 50 A 45 45 0 0 1 95 50 L 5 50 Z" fill="#ffffff" />
6
</svg>

Explicación:

• El primer elemento path dibuja el semicírculo sólido.
• El segundo elemento path dibuja un semicírculo blanco pequeño que enmascara el semicírculo grande.

Usando Canvas

De manera similar, en Canvas, puedes dibujar un semicírculo exterior y uno interior para lograr el efecto de semicírculo hueco:

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
  // Semicírculo sólido
10
  ctxOverlay.beginPath();
11
  ctxOverlay.arc(50, 50, 50, Math.PI, 0, false);
12
  ctxOverlay.fillStyle = "#3498db";
13
  ctxOverlay.fill();
14

15
  // Semicírculo blanco superpuesto
16
  ctxOverlay.beginPath();
17
  ctxOverlay.arc(50, 50, 45, Math.PI, 0, false);
18
  ctxOverlay.fillStyle = "#ffffff";
19
  ctxOverlay.fill();
20
</script>

Explicación:

• Dibuja primero el semicírculo exterior sólido, luego dibuja un semicírculo blanco pequeño encima para lograr el efecto de hueco.

Con estos métodos, puedes implementar varios efectos de semicírculos sólidos y huecos en frontend.