Unidad 15. Introducción a los gráficos Canvas (VI)

15.4. Formas curvadas

Para dibujar curvas disponemos 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 parámetro 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.

<!doctype html>
<html lang="es">
  <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

También puedes verla en esta página: ejemplo3,

Enero-2019 (V 2.2)

Pág. 15.6

Cursos Informática Gratuitos

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