⇪

Dibujar una elipse con path

facebook-svg gplus-svg twitter-svg

Dibujar una elipse

Para dibujar una elipse hay que trazar un arco elíptico que acaba casi en el mismo punto donde empieza
( a100,70 0 1, 0 0,-1 z ) y lo cerramos con closepath ( a100,70 0 1, 0 0,-1 z ). Es importante que escojamos la parte grande de la curva: large-arc-flag = 1 ( a100,70 0 1, 0 0,-1 z )

El pequeño circulo <circle class="origen" marca el punto donde empezamos a dibujar.

Cómo calcular el centro de una elipse

Asumiendo que:
- se trata de una elipse horizontal ( el eje mayor es horizontal )
- que rx y ry son los radios de la elipse
- que el parámetro sweep-flag = 1 ( dibuja el arco en el sentido del reloj ).
- que x0,y0 son las coordenadas del punto de origen ( donde empezamos a dibujar la elipse )
las coordenadas del centro del circulo son:
var cx= x0 – rx;
var cy= y0;

No te olvides: siempre que sea posible, pon el JavaScript dentro del <body>, justo antes de su cierre: los estilos arriba, los scripts al fondo.


var rx = 100;
var ry = 70;
var cx = 225-rx;
var centro = document.getElementById("centro");
centro.setAttribute("cx",cx);

Cómo calcular los focos de una elipse

Los focos de la elipse son dos puntos equidistantes del centro, y situados en el eje mayor.
La distancia entre el centro de la elipse y uno de los focos es: c = √rx2-ry2

elipse

Ya que hay que calcular las coordenadas de los focos utilizaremos JavaScript.
Traduciendo a JavaScript las fórmulas utilizadas obtenemos:

var c = Math.sqrt((rx*rx)-(ry*ry))
las coordenadas de F1
var F1x = cx - c = cx - Math.sqrt((rx*rx)-(ry*ry))
var F1y = cy
Y las coordenadas de F2
var F2x = cx + c = cx + Math.sqrt((rx*rx)-(ry*ry))
var F2y = cy

No te olvides: siempre que sea posible, pon el JavaScript dentro del <body>, justo antes de su cierre: los estilos arriba, los scripts al fondo.


 var rx = 100;
	var ry = 70;
	var cx = 225-rx;
	var cy = 100;
	
	var Focus1 = document.getElementById("Focus1");
	var F1cx = parseInt(cx+Math.sqrt((rx*rx)-(ry*ry)));
	Focus1.setAttribute("cx",F1cx);
	
	var Focus2 = document.getElementById("Focus2");
	var F2cx = parseInt(cx-Math.sqrt((rx*rx)-(ry*ry)));
	Focus2.setAttribute("cx",F2cx);

Como calcular la posición de un punto sobre la elipse

Para calcular las coordenadas de un punto ( xp,yp ) en la circunferencia de una elipse utilizaremos las siguientes fórmulas:
var xp = cx + rx * Math.cos(a);
var yp = cx + ry * Math.sin(a);
Donde cx y cy son las coordenadas del centro de la elipse;
rx, ry son los radios de la elipse: el radio horizontal (rx) y el radio (ry)
a es el ángulo entre el origen del trazado y este punto.

No te olvides: siempre que sea posible, pon el JavaScript dentro del <body>, justo antes de su cierre: los estilos arriba, los scripts al fondo.


 var rx = 100;
	var ry = 70;
	var cx = 225-rx;
	var cy = 100;
	
	var a =290; // ángulo
	
	var arad = (Math.PI / 180) *a;
	var xp = parseInt(cx+rx*Math.cos(arad));
	var yp = parseInt(cy+ry*Math.sin(arad));
	var punto = document.getElementById("punto");
	punto.setAttribute("cx",xp);
	punto.setAttribute("cy",yp);

NOTA: Las líneas que marcan el ángulo, y el valor del mismo no pertenecen al código. Su propósito es exclusivamente didáctico.

290°