cómo generar un círculo utilizando javascript

Question

¿Cómo puedo crear un círculo en HTML utilizando javascript. ¿Se puede hacer utilizando Javascript o no? He hecho crear rectángulos y cuadrados, pero no sé cómo lograr un círculo.

Answer 1

Es necesario utilizar el siguiente Liabrary: -

Ponga el código de la etiqueta de la cabeza.

<script type="text/JavaScript" src="jsDraw2D.js"></script> 

Está disponible para su descarga desde here

Copia y pega el siguiente código donde quieres que aparezca tu círculo ...

<script type="text/JavaScript"> 

//Create jsGraphics object 
var gr = new jsGraphics(document.getElementById("canvas")); 

//Create jsColor object 
var col = new jsColor("red"); 

//Create jsPen object 
var pen = new jsPen(col,1); 

//Draw a Line between 2 points 
var pt1 = new jsPoint(20,30); 
var pt2 = new jsPoint(120,230); 
gr.drawLine(pen,pt1,pt2); 

//Draw filled circle with pt1 as center point and radius 30. 
gr.fillCircle(col,pt1,30); 

//You can also code with inline object instantiation like below 
gr.drawLine(pen,new jsPoint(40,10),new jsPoint(70,150)); 

</script> 

se puede comprobar la documentación para esto desde here

Answer 2

Puede usar alguna biblioteca de JavaScript para el mismo. Como aquí es la biblioteca un tercero js que puede servir a su propósito

http://processingjs.org/

Answer 3

Usando HTML5 Canvas y AJAX, puede hacer lo siguiente:

window.onload = function(){ 
    var canvas = document.getElementById("myCanvas"); 
    var context = canvas.getContext("2d"); 
    var centerX = canvas.width/2; 
    var centerY = canvas.height/2; 
    var radius = 10; 

    context.beginPath(); 
    context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); 
    context.fillStyle = "black"; 
    context.fill(); 
    context.lineWidth = 1; 
    context.strokeStyle = "black"; 
    context.stroke(); 

};

la línea grande que es el:

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); 

Para más ir a ver: HTML5 Canvas Tutorials

Answer 4

Aquí está una manera simple de hacer un círculo para navegadores modernos:

<div style='border: 3px solid red; border-radius: 50px; width: 100px; height: 100px;'> 
</div> 

Demo.

edición — Funciona mejor con el de "frontera-box" "cuadro de dimensionamiento" ("-moz-box-dimensionamiento" para Firefox) ajustado.

<style> 
    div.circle { 
    border: 3px solid red; 
    border-radius: 50%; 
    width: 100px; height: 100px; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    } 
</style> 

<div class=circle> 
</div>