Cargando



HTML5 - Canvas Avanzado

En este tutorial veremos como dibujar con el elemento canvas utilizando el path y algunas de las características del mismo para lograr este objetivo.


feb 17 2014 05:22
Profesional
feb 21 2014 13:56
Al momento de utilizar el elemento canvas para dibujar no estamos limitados a dibujar figuras rectangulares, también podemos dibujar utilizando coordenadas y los denominados paths que son caminos por los cuales le indicaremos al elemento canvas donde y como mostrar nuestro dibujo.

Las posibilidades que esto nos da son impresionantes, debido a que con los algoritmos necesarios podremos realizar composiciones sin límite, dibujar cualquier tipo de figura en HTML5 y con ello hasta lograr en conjunción con otros elementos resultados nunca imaginados en especificaciones anteriores del lenguaje.

Utilizando Path

Como mencionamos el path es lo que nos permitirá indicar al canvas las coordenadas por las cuales debe hacer el dibujo, con dichas coordenadas el canvas podrá saber dónde trazar las líneas correspondientes y al final con la acumulación correcta de líneas podremos lograr cualquier tipo de figura.

Antes de pasar a los ejemplos correspondientes debemos saber que métodos están disponibles para el elemento canvas y el path, veamos a continuación la siguiente lista:
  • beginPath(): Este método nos permite iniciar un nuevo path.
  • closePath(): Este método intenta cerrar el path actual dibujando una línea desde el final de la última línea hasta las coordenadas iniciales.
  • fill(): Rellena las formas descritas por los sub-path.
  • isPointInPath(x, y): Retorna true si el punto especificado está contenido dentro de la forma dibujada por el path actual.
  • lineTo(x, y): Dibuja un sub-path en las coordenadas especificadas.
  • moveTo(x, y): Nos permite movernos a las coordenadas especificadas sin necesidad de dibujar un sub-path.
  • rect(x, y, w, h): Dibuja un rectángulo cuyas coordenadas en la esquina superior izquierda corresponden a (x, y) su ancho corresponde a w y su altura corresponde a h.
  • stroke(): Dibuja las líneas exteriores de las formas dibujadas por el sub-path.
Una vez que conocemos que herramientas tenemos para utilizar el canvas debemos saber el orden del flujo con el cual podemos crear un dibujo, este orden es el siguiente:

• Llamamos al método beginPath.
• Nos movemos a la posición inicial utilizando el método moveTo.
• Dibujamos los sub-paths con los métodos lineTo, etc.
• Opcionalmente podemos llamar al método closePath.
• Por último llamamos a los métodos fill o stoke.

Ya tenemos el orden recomendado para iniciar a dibujar ahora vemos el código correspondiente en HTML5.

<!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">
		 Su navegador no es compatible con el elemento <code>canvas</code>
	 </canvas>
	 <script>
		 var ctx = document.getElementById("canvas").getContext("2d");
	
		 ctx.fillStyle = "yellow";
		 ctx.strokeStyle = "black";
		 ctx.lineWidth = 4;
	
		 ctx.beginPath();
		 ctx.moveTo(10, 10);
		 ctx.lineTo(110, 10);
		 ctx.lineTo(110, 120);
		 ctx.closePath();
		 ctx.fill();
				
		 ctx.beginPath();
		 ctx.moveTo(150, 10);
		 ctx.lineTo(200, 10);
		 ctx.lineTo(200, 120);
		 ctx.lineTo(190, 120);
		
		 ctx.fill();
		 ctx.stroke();
			
		 ctx.beginPath();
		 ctx.moveTo(250, 10);
		 ctx.lineTo(250, 120);
		 ctx.stroke();
	 </script>
</body>
</html>

Como podemos ver se hace dos llamados a beginPath(), con ello logramos iniciar las áreas de dibujo en el canvas luego con moveTo() establecemos las posiciones iniciales y de resto es dibujar.

Veamos cómo nos queda nuestro dibujo en el navegador:



html5_canvasavanz.jpg


Con esto finalizamos el tutorial, no solo conociendo los distintos métodos y herramientas adicionales que podemos utilizar sino destacando que ya no son formas solamente rectangulares las cuales podemos dibujar.

¿Te ayudó este Tutorial?


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!

X