ARTÍCULO 28: Introducción a Canvas. Gráficos y animaciones en HTML 5. (III)


Dibujar formas

En Canvas no hay funciones definidas para dibujar formas poligonales (salvo para el rectángulo), no existen funciones para dibujar triángulos, pentágonos, etc. La forma de trabajar con Canvas es dibujar "formas" o "caminos" (paths).

Para construir una forma lo primero es inicializarla con la función beginPath(), luego se coloca el cursor en el punto de inicio con la función moveTo(x,y) y a partir de ahí se va creando la forma con las distintas funciones existentes para dibujar líneas, arcos, etc. Una vez hemos acabado la forma podemos usar dos funciones para dibujarla realmente sobre el lienzo.

1. stroke() dibuja una forma abierta o cerrada, sin color de relleno. Si hacemos coincidir el último punto con el primero la forma será cerrada.

2. fill() dibuja una forma cerrada con el color de relleno actual. Si la forma estaba abierta, la propia función fill() crea una línea recta desde el último punto al punto inicial para cerrarla.

También se puede usar la función closePath() que crea una línea recta desde el último punto al punto inicial.

Veamos un ejemplo de todo esto:

<html>
<head>
<title>Ejemplo2 Canvas </title>
<script type="text/javascript">
function dibujarCanvas(){
var canvas = document.getElementById('miCanvas');
var contexto = canvas.getContext('2d');
// a. Forma abierta
contexto.beginPath();
contexto.moveTo(50,50);
contexto.lineTo(50,150);
contexto.lineTo(150,150);
contexto.stroke();
// b. Forma cerrada con relleno
contexto.beginPath();
contexto.moveTo(200,50);
contexto.lineTo(200,150);
contexto.lineTo(300,150);
contexto.fill();
// c. Forma cerrada sin relleno
contexto.beginPath();
contexto.moveTo(50,200);
contexto.lineTo(50,300);
contexto.lineTo(150,300);
contexto.closePath();
contexto.stroke();
}
</script>
</head>
<body onLoad="dibujarCanvas();">
<canvas id="miCanvas" width="450" height="350">Su navegador no soporta Canvas.</canvas>
</body>
</html>

Puedes ejecutar el código anterior copiándolo y pegándolo en el siguiente recuadro, luego pulsa el botón "Visualizar el código escrito".


El código anterior produce la siguiente salida:

Formas simples canvas

Formas curvadas

Para dibujar curvas diponemos de tres métodos básicos. 1. Arcos. 2. Curvas de Bezier. 3. Curvas cuadráticas.

1. Arcos.

Para dibujar arcos tenemos la función:

arc(x, y, radio, ángulo inicial, ángulo final, sentido de giro)

Donde los parámetros (x,y) son las coordenadas del centro de la circunferencia cuyo arco vamos a dibujar. El parámetro radio es el radio de dicha circunferencia. La amplitud del arco irá desde el ángulo inicial al ángulo final en el sentido de las agujas del reloj. Los ángulos se miden en radianes. La equivalencia con los grados nos la da esta expresión: radianes = (Math.PI/180)*grados. Donde Math.PI es el número Pi (3,1416...)

Si el párametro sentido de giro tiene el valor lógico cierto, el arco irá en sentido contrario a las agujas del reloj. Este último parámetro es opcional y tiene el valor por defecto falso.

Vamos a ver unos ejemplos que nos harán entender esta definición.

<html>
<head>
<title>Ejemplo3 Canvas </title>
<script type="text/javascript">

function dibujarCanvas(){
var canvas = document.getElementById('miCanvas');
var contexto = canvas.getContext('2d');
// a. Arco desde 0 grados hasta 90 grados en sentido de las agujas del reloj
contexto.beginPath();
contexto.arc(60,60,50,radianes('0'),radianes('90'),false);
contexto.stroke();
// b. Arco desde 0 grados hasta 90 grados en sentido contrario de las agujas del reloj
contexto.beginPath();
contexto.arc(200,60,50,radianes('0'),radianes('90'),true); contexto.stroke();
// c. Arco desde 90 grados hasta 270 grados en sentido de las agujas del reloj
contexto.beginPath();
contexto.arc(350,60,50,radianes('90'),radianes('270')); contexto.stroke();
}
function radianes(grados){
var radianes = (Math.PI/180)*grados;
return radianes;
}
</script>
</head>
<body onLoad="dibujarCanvas();">
<canvas id="miCanvas" width="450" height="350">Su navegador no soporta Canvas.</canvas>
</body>
</html>

Produce la siguiente salida:

Arcos Canvas

2. Curvas de Bezier.

Las curvas de Bezier son un tipo de curvas muy usadas en diseño que necesitan un punto de inicio, un punto final y unos puntos de control. Son un poco dificiles de explicar con palabras, sin embargo en este enlace de Wikipedia hay unos gráficos animados muy didácticos.

La mejor forma de familiarizarse con las curvas de Bezier es dibujarlas con programas como Illustrator o Inkscape (gratuito) o usar este simulador.

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) donde cp1x, cp1y, son las coordenadas del primer punto de control, cp2x, cp2y, son las coordenadas del segundo punto de control, x, y son las coordenadas del punto final de la curva. El primer punto de la curva será el punto actual, al que habremos llegado con moveTo o con cualquier función de dibujo (arc, lineTo, ... )

3. Curvas cuadráticas.

Son similares a las anteriores pero con un solo punto de control.

quadraticCurveTo(cp1x, cp1y, x, y) donde cp1x, cp1y, son las coordenadas del primer punto de control, cp2x, cp2y,mientras que x, y son las coordenadas del punto final de la curva. El primer punto de la curva será el punto actual.

Veamos unos ejemplos.

<html>
<head>
<title>Ejemplo 4 Canvas </title>
<script type="text/javascript">
function dibujarCanvas(){
var canvas = document.getElementById('miCanvas');
var contexto = canvas.getContext('2d');
// curva cuadratica, esquina bien redondeada
contexto.beginPath();
contexto.moveTo(125,25);
contexto.lineTo(75,25);
contexto.quadraticCurveTo(25,25,25,75);
contexto.lineTo(25,125);
contexto.stroke();
// curva cuadratica, esquina poco redondeada
contexto.beginPath();
contexto.moveTo(350,25);
contexto.lineTo(300,25);
contexto.quadraticCurveTo(265,35,250,75);
contexto.lineTo(250,125);
contexto.stroke();
// curva bezier, esquinas redondeadas hacia afuera
contexto.beginPath();
contexto.moveTo(125,200);
contexto.lineTo(75,200);
contexto.bezierCurveTo(35,185,10,210,25,250);
contexto.lineTo(25,300);
contexto.stroke();
// dos curvas bezier, en forma de letra ese
contexto.beginPath();
contexto.moveTo(300,200);
contexto.bezierCurveTo(260,200,200,220,260,250);
contexto.bezierCurveTo(325,275,350,300,300,300);
contexto.stroke();
}
</script>
</head>
<body onLoad="dibujarCanvas();">
<canvas id="miCanvas" width="450" height="350">Su navegador no soporta Canvas.</canvas>
</body>
</html>

Esta es la salida:

Curvas Bezier Canvas

En la siguiente imagen hemos añadido la situación de los puntos de control en color azul y los puntos iniciales/finales de las curvas en color rojo.

La primera figura esta formada por dos líneas rectas unidas por una curva cuadrática con el punto de control en la interseccion de las dos rectas.

La figura de la parte superior derecha esta formada por dos líneas rectas unidas por una curva cuadrática con el punto de control un poco más abajo de la interseccion de los dos lados rectos.

La figura de la parte inferior izquierda esta formada por dos líneas rectas unidas por una curva de Bezier con el punto de control un poco más arriba de la interseccion de las dos líneas rectas.

La figura de la parte inferior derecha está formada por dos curvas de Bezier con los puntos de control como se observa en la figura.

Abril-2013
Pág. 3 de 5

Atrás  Inicio  Adelante







Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.