Dibujar una elipse

En este momento podemos dibujar una elipse en canvas, utilizando el método ellipse(). La mala noticia es que este método funciona solo en Chrome y versiones modernas de Opera.

	JavaScript	Descripción	Defecto
lineWidth	context.lineWidth = numero;	Determina (sets) o devuelve (returns) la grosor de la línea.	1
strokeStyle	context.strokeStyle = color \| gradient \| pattern;	Determina (sets) o devuelve (returns) el color, gradiente o patrón de la línea.	negro
fillStyle	context.fillStyle = color \| gradient \| pattern;	Determina o devuelve el color, gradiente o patrón del relleno.	negro
beginPath()	context.beginPath();	Empezamos a dibujar
ellipse()	context.ellipse(X, Y, rX, rY, ar, ap, af, cR);	Dibuja una elipse `X` y `Y` son las coordenadas del centro, `rX` y `rY` representan el radio en x y el radio en y, `ar` representa el ángulo de rotación del eje horizontal (en radianes), `ap` es el ángulo de partida ( en radianes ), `af` es el ángulo final ( en radianes ), y `cR` en el sentido del reloj ( `false` ) o en sentido contrario ( `true` )
bezierCurveTo()	context.bezierCurveTo(cx1,cy1,cx2,cy2,x,y);	Define una curva de Bézier. cx1,cy1,cx2,cy2= coordenadas puntos de anclaje (control points) x,y = coordenadas punto final (el punto de partida siendo determinado previamente).
fill()	context.fill();	Rellena una forma geométrica.	black
stroke()	context.stroke();	Dibuja una línea ya definida.

Vea la chuleta con las propiedades y metodos() de canvas.

Dibujar una elipse con ellipse()

El método ellipse() tiene la siguiente sintaxis:

ctx.ellipse(centroX, centroY, radioX, radioY, rotacion, ap, af, cR);

Donde:
- centroX y centroY son las coordenadas del centro,
- radioX y radioY representan el radio en x y el radio en y,
- la rotacion representa el ángulo de rotación del eje horizontal (en radianes),
- ap es el ángulo de partida ( en radianes ),
- af es el ángulo final ( en radianes ), y
- cR ( contra reloj ) es la dirección.

Exactamente como en el caso de arc(), el parametro cR puede tomar dos valores:
- true ( verdadero, o sea: en sentido contrario al de las agujas del reloj ) y
- false ( falso, o sea: en el sentido de las agujas del reloj ).


var lienzo = document.getElementById("lienzo");
		if (lienzo && lienzo.getContext) {
		var contexto = lienzo.getContext("2d");
			if (contexto) {
				    var cw = lienzo.width;
					var ch = lienzo.height;
					contexto.lineWidth = 5;
		            contexto.strokeStyle = "#00f"; 
				    var centroX = cw/2, centroY = ch/2, radioX = 100, radioY = 60, rotacion=0, ap = 0, af = 2*Math.PI, cR = true;
					contexto.ellipse(centroX, centroY, radioX, radioY, rotacion, ap, af, cR);
					contexto.stroke();
				}
		}

Dibujar una elipse utilizando curvas de Bézier

Mientras tanto podemos utilizar curvas de Bézier para dibujar elipses. El internet es una fuente ilimitada de recursos donde podemos encontrar de todo, incluso funciones que nos facilitan dibujar elipses.

Para dibujar una elipse necesitamos cuatro curvas de Bézier, una para cada cuadrante. Para determinar el desplazamiento horizontal y vertical ( offset ) de los puntos de control, y por tanto la curvatura de la elipse, utilizamos una constante llamada kappa.
La función dibujarElipse(ctx, x, y, w, h), que tenemos que escribir, toma seis argumentos: ctx reprezenta el contexto del <canvas>, x e y representan las coordenadas del punto de origen, mientras que w y h representan la anchura ( w ) y respectivamente la altura ( h ) de nuestra elipse. El parámetro lw representa la grosor de la línea, definida con lineWidth.
Las otras coordenadas las calculamos en función de x, y, w y h.

Consejo: Pruebe modificar el valor de kappa. Si kappa = 1 obtenemos un rectangulo con las esquinas ligeramente redondeadas. Si kappa = 0 el rezultado será un rombo.

Para saber más acerca de kappa visite la página de Adam Stanislav Drawing a circle with Bézier Curve

See the Pen 5109ecd030d00672970e24c40e1c2d00 by Gabi (@enxaneta) on CodePen.

También podemos dibujar una elipse utilizando el método lineTo()

w3.unpo<code>todo