Dibujar un óvalo
Un óvalo, en geometría, es un círculo aplastado que se asemeja a una forma ovoide o elíptica. A diferencia de otras curvas, el término óvalo no está claramente definido, y muchas curvas diferentes son llamadas óvalos. Su forma no se aparta mucho de la de una circunferencia o una elipse.
| JavaScript | Descripción | Defecto | |
|---|---|---|---|
| save() | context.save(); | Guarda el estado actual del canvas. | |
| restore() | context.restore() | Recupera el estado previamente guardado del canvas. | |
| arc() | context.arc(x, y, r, sA, eA, aC) |
Define un segmento circular. x y = coordenadas centro r = radio sA = ángulo de partida en radianes eA = ángulo final en radianes aC = sentido contra reloj (anti-Clockwise) true | false |
|
| scale() | context.scale(h,v); | Reduce o amplía a escala el dibujo actual. h = horizontal; v = vertical Valores que pueden tomar los parametros del método: 1=100%, 0.5=50%, 2=200%, etc... |
1 |
Vea la chuleta con las propiedades y metodos() de canvas.
Más información acerca de los métodos save() y restore().
Para dibujar un óvalo, dibujaremos un círculo, que aplastaremos luego, utilizando el método scale().
El método scale(x,y) reduce o amplía a escala el dibujo actual, y acepta dos parámetros: la deformación en x, y la deformación en y.
Por ejemplo: si y = 0.5 la altura se verá reducida a un 50%. Si por el contrario x = 2, la anchura aumentara a 200% de su valor inicial.
En nuestro caso queremos que la anchura aumente a 200% de su valor inicial, y la altura quede sin cambiar.
ctx.scale(2, 1);Importante: para centrar el óvalo resultante hemos dibujado el circulo original hacia la izquierda.
ctx.arc( centroX/2, centroY, radio, 0, 2 * Math.PI );
var canvas = document.getElementById("lienzo");
if (canvas && canvas.getContext) {
var ctx = canvas.getContext("2d");
if (ctx) {
//calculamos el centro del canvas
var centroX = ctx.canvas.width/2;
var centroY = ctx.canvas.height/2;
// guardamos el estado inicial
ctx.save();
var radio = 50;
// modificamos la escala horizontalmente
ctx.scale(2, 1);
// dibujamos un círculo que será aplastado en un óvalo
ctx.beginPath();
ctx.arc( centroX / 2, centroY, radio, 0, 2 * Math.PI );
// restauramos el estado inicial, el de antes de modificar la escala
// de esta manera el borde no será aplastado
ctx.restore();
// trazamos el borde
ctx.lineWidth = 15;
ctx.strokeStyle = "#00f";
ctx.stroke();
}
}