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 difíciles 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).
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, 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.
<!doctype html>
<html lang="es">
<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:
También puedes verla en esta página: ejemplo4,
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 está formada por dos líneas rectas unidas por una curva cuadrática con el punto de control en la intersección de las dos rectas.
La figura de la parte superior derecha está formada por dos líneas rectas unidas por una curva cuadrática con el punto de control un poco más abajo de la intersección de los dos lados rectos.
La figura de la parte inferior izquierda está formada por dos líneas rectas unidas por una curva de Bezier con el punto de control un poco más arriba de la intersección 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.
Cursos Informática Gratuitos Síguenos en: Facebook Sobre aulaClic Política de Cookies
© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.