¿Cómo dibujar un círculo en la página html?

Nuestros desarrolladores estrellas agotaron sus provisiones de café, en su búsqueda a tiempo completo por la resolución, hasta que Rafael halló el arreglo en GitHub y hoy la comparte contigo.

Solución:

No puedes dibujar un círculo per se. Pero puedes hacer algo idéntico a un círculo.

Tendrías que crear un rectángulo con esquinas redondeadas (a través de border-radius) que son la mitad del ancho/alto del círculo que quieres hacer.

    #circle 
      width: 50px;
      height: 50px;
      -webkit-border-radius: 25px;
      -moz-border-radius: 25px;
      border-radius: 25px;
      background: red;
    

Es muy posible en HTML5. Sus opciones son: SVG incrustado y etiqueta.

Para dibujar un círculo en SVG incrustado:

Encierra en un círculo :

var canvas = document.getElementById("circlecanvas");
var context = canvas.getContext("2d");
context.arc(50, 50, 50, 0, Math.PI * 2, false);
context.fillStyle = "red";
context.fill()

Hay algunos círculos Unicode que podrías usar:

*  font-size: 50px; 

○
◌
◍
◎
●

Más formas aquí.

Puede superponer texto en los círculos si desea:

#container 
    position: relative;

#circle 
  font-size: 50px;
  color: #58f;

#text 
    z-index: 1;
    position: absolute;
    top: 21px;
    left: 11px;

    
●
    
a

También puede usar una fuente personalizada (como esta) si desea tener una mayor probabilidad de que se vea igual en diferentes sistemas, ya que no todas las computadoras/navegadores tienen instaladas las mismas fuentes.

Comentarios y valoraciones del tutorial

Nos puedes proteger nuestra ocupación poniendo un comentario o dejando una valoración te estamos eternamente agradecidos.

---

---

Utiliza Nuestro Buscador