Cargando

Ir a contenido

X


Ver Más! Unir varios PDF en uno en Windows 10 nunca fue tan fácil! Sigue los pasos con PDFelement y estará listo en un abrir y cerrar de ojos.


 


HTML5 - Dibujando Curvas

En este tutorial veremos cómo hacer algunas curvas utilizando métodos avanzados en HTML5.


Escrito por el feb 23 2014 06:46


Dibujar curvas en un canvas puede ser sencillo o complejo, todo depende de lo que se quiera lograr, se pueden hacer algunos efectos interesantes, lo que podríamos utilizar para construir algunas funcionalidades en nuestra página, que resalten del resto de las páginas hechas en HTML5.

Una de las cosas que podemos hacer es darle un manejo avanzado a la creación de las líneas curvas, con este tipo de herramientas estaremos más cerca de no tener limitaciones a la hora de pensar en lo que nuestra página puede hacer.

Dibujar una curva al mover el mouse

Este caso es bastante interesante ya que lo que hacemos es dibujar una curva al momento de mover el mouse, adicionalmente si presionamos alguna tecla en nuestro teclado algunos puntos de la curva cambian.

Por ejemplo, si pulsamos la tecla ctrl se moverá el primer punto que representa el final del sub-path, si presionamos la tecla shift se moverá el segundo punto que son los primeros dos argumentos del método arcTo() y por último en caso que no presionemos ninguna tecla se moverá el tercer punto que está representado por los últimos dos argumentos del método.

Veamos a continuación el código con el que logramos dichos efectos:

<!DOCTYPE HTML>
<html>
<head>
	 <title>Ejemplo</title>
	 <style>
		 canvas {border: thin solid black}
		 body > * {float:left;}
	 </style>
</head>
<body>
	 <canvas id="canvas" width="500" height="140">
		 Su navegador no es compatible con el elemento <code>canvas</code>
	 </canvas>
		 	 <script>
		 var canvasElem = document.getElementById("canvas");
		 var ctx = canvasElem.getContext("2d");
		 var point1 = [100, 10];
		 var point2 = [200, 10];
		 var point3 = [200, 110];
		 draw();
		 canvasElem.onmousemove = function (e) {
			 if (e.ctrlKey) {
				 point1 = [e.clientX, e.clientY];
			 } else if(e.shiftKey) {
				 point2 = [e.clientX, e.clientY];	
			 } else {
				 point3 = [e.clientX, e.clientY];
			 }
			 ctx.clearRect(0, 0, 540, 140);
			 draw();
		 }
		 function draw() {
			 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], 50);
			 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>

Como vemos, primero en el código definimos el manejador de la recepción de eventos de las teclas que presionamos, en ella establecemos los valores que se deben tomar.

Veamos a continuación una captura de pantalla de cómo podría resultar esto en nuestro navegador, es importante mencionar que al ser dinámico los resultados pueden variar al reproducir este ejemplo:

html5_curvasarcavanz.jpg


Utilizando el método Arc

Anteriormente, solo habíamos utilizado el método arcTo(), ahora veremos cómo funciona el método arc() su manejo es más sencillo, ya que especificamos un punto en el canvas a través de los dos primeros argumentos y luego el radio y el ángulo de la curva.

Veamos el siguiente ejemplo de cómo dibujar tres tipos de curvas con este método:

<!DOCTYPE HTML>
<html>
<head>
	 <title>Ejemplo</title>
	 <style>
		 canvas {border: thin solid black}
		 body > * {float:left;}
	 </style>
</head>
<body>
	 <canvas id="canvas" width="500" height="140">
		 Su navegador no es compatible con el elemento <code>canvas</code>
	 </canvas>
	 <script>
		 var ctx = document.getElementById("canvas").getContext("2d");
		 ctx.fillStyle = "yellow";
		 ctx.lineWidth = "3";
		 ctx.beginPath();
		 ctx.arc(70, 70, 60, 0, Math.PI * 2, true);
		 ctx.stroke();
	 	
		 ctx.beginPath();
		 ctx.arc(200, 70, 60, Math.PI/2, Math.PI, true);
		 ctx.fill();
		 ctx.stroke();
			
		 ctx.beginPath();
		 var val = 0;
		 for (var i = 0; i < 4; i++) {
			 ctx.arc(350, 70, 60, val, val + Math.PI/4, false);
			 val+= Math.PI/2;
		 }
		 ctx.closePath();
		 ctx.fill();
		 ctx.stroke();
	 </script>
</body>
</html>

Veamos ahora como luce esto en nuestro navegador:




html5_curvasarcavanz2.jpg


Como vemos el primer y segundo ejemplo son círculos, uno completo y el otro con una pequeña abertura, en cambio el tercer círculo es totalmente irregular y nos muestra la versatilidad del método arc().
¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
  • -
  • 0

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!
10
VOTA
5
100%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado feb 23 2014 06:46
  •   Actualizado feb 25 2014 08:46
  •   Visitas 1.5K
  •   Nivel
    Profesional