Cargando

Ir a contenido


 


HTML5 - Canvas, Utilizando Arc

En este tutorial veremos como utilizar el método Arc, sabremos su funcionamiento y veremos algunos ejemplos en código de como aplicarlo.


Escrito por el feb 17 2014 04:31


Básicamente todas las figuras están hechas de líneas y curvas, en muchos casos podemos simular las curvas utilizando líneas muy cortas y en gran cantidad, sin embargo esto es muy complejo y conlleva un trabajo excepcional, HTML5 y su practicidad nos ofrecen el método Arc con lo que podemos desarrollar líneas curvas y de alguna forma poder complementar nuestros dibujos.

Método Arc

Como mencionamos al inicio, este método nos permite generar líneas curvas dentro del elemento canvas sin mayor complejidad, sin necesidad de introducir complejas fórmulas matemáticas como tal vez deba realizarse en algunos lenguajes de programación.

Antes de ver cómo funciona este método debemos conocer sus características y propiedades, estas las veremos a continuación en la siguiente lista:
  • arc(x, y, rad, anguloInicial, anguloFinal, dirección): Este método dibuja una curva en las coordenadas (x, y) con un radio rad, el ángulo inicial es anguloInicial y el final del ángulo es anguloFinal. Tenemos un parámetro opcional que es dirección y especifica la dirección que tomará la curva dibujada por el método.
  • arcTo(x1, y1, x2, y2,rad): Este método nos permite dibujar una curva a las coordenadas (x2, y2) que pasan las coordenadas (x1, y1) y posee un radio rad.

Como vemos tenemos dos métodos básicos que nos permiten todo lo necesario para poder dibujar las líneas curvas en nuestro elemento canvas, ahora veamos un poco de código para que demostremos como poner en práctica esto que acabamos de ver:

<!DOCTYPE HTML>
<html>
    <head>
	    <title>Example</title>
	    <style>
		    canvas {border: thin solid black}
		    body > * {float:left;}
	    </style>
    </head>
    <body>
	    <canvas id="canvas" width="500" height="140">
		    Your browser doesn't support the <code>canvas</code> element
	    </canvas>
	    <script>
		    var ctx = document.getElementById("canvas").getContext("2d");

		    var point1 = [100, 10];
		    var point2 = [200, 10];
		    var point3 = [200, 110];
		    ctx.fillStyle = "yellow";
		    ctx.strokeStyle = "black";
		    ctx.lineWidth = 4;

		    ctx.beginPath();
		    ctx.moveTo(point1[0], point1[1]);
	    	ctx.arcTo(point2[0], point2[1], point3[0], point3[1], 100);
		    ctx.stroke();
	
		    drawPoint(point1[0], point1[1]);
		    drawPoint(point2[0], point2[1]);
		    drawPoint(point3[0], point3[1]);
	
		    ctx.beginPath();
		    ctx.moveTo(point1[0], point1[1]);
		    ctx.lineTo(point2[0], point2[1]);
		    ctx.lineTo(point3[0], point3[1]);
		    ctx.stroke();
	
		    function drawPoint(x, y) {
			    ctx.lineWidth = 1;
			    ctx.strokeStyle = "red";
			    ctx.strokeRect(x -2, y-2, 4, 4);
		    }
	    </script>
  </body>
</html>

La línea curva del ejemplo la hemos hecho utilizando el método arcTo() que habíamos descrito anteriormente, para dibujar esta curva dependemos de dos líneas, la primera es dibujada a partir del extremos final del último sub-path al punto descrito por los primeros dos argumentos del método y la segunda línea es dibujada del punto descrito por los primeros dos argumentos hasta el punto descrito por el tercer y cuarto argumento.

Finalmente la curva es dibujada como la línea más corta entre el último sub-path y el segundo punto que describe una curva de un circulo con el radio especificado por el último argumento, para que veamos a que nos referimos, el código incorpora unas líneas de referencia en color rojo. Veamos a continuación una imagen de cómo queda esto en nuestro navegador:


Una vez demostrado el funcionamiento de Arc para dibujar líneas curvas, podemos dar por finalizado este tutorial, ya poseemos una nueva herramienta que nos permitirá extraer más del elemento canvas y por ende extender mucho más su funcionalidad.
¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
-
VOTA
5
0%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado feb 17 2014 04:31
  •   Visitas 627
  •   Nivel
    Profesional



Tutoriales Relacionados


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
Demuestra que eres experto!
  ESCRIBIR TUTORIAL
Suscribirse