Tutorial HTML5 – Canvas pintar y rellenar formas irregulares
Bienvenidos a VerTutoriales.com, en esta ocasión traemos como dibujar sobre el canvas sin forma específica (dibujar caminos), para ello utilizaremos varias funciones gráficas que soporta HTML5.
3. Pintar formas irregulares
Para dibujar con estas funciones es muy sencilla, para empezar declaramos un nuevo camino con beginPath() y a continuación deberemos de situar el cursor donde queramos comenzar a pintar con moveTo(), una vez situado en el lugar que corresponda, solo nos quedaría ir tranzando lineas con lineTo(), una vez realizados todos los trazos, podremos utilizar fill() para rellenar la figura que pintaramos, siempre y cuando esta esté cerrada.
Recordad que para lanzar estas funciones debeis de haber declarado un canvas y a este definirle un contexto para poder dibujar en él.
Expondré las funciones que utilizaremos a continuación:
beginPath():
Solo se utiliza para inicializar el proceso de pintado, aunque no es necesario invocarlo lo recomiendo como buena práctica de programación.
moveTo(x, y):
Sirve para situar el puntero del «lapiz» donde queramos comenzar a pintar, sería como alzar la mano y situarla donde queramos. Recibe dos parámetros, la posición x e y donde posicionará el puntero.
lineTo(x, y):
Con lineTo() realizamos el pintado en sí mismo, recibe dos parámetros x e y, que indicarán a donde tendrá que lanzar el trazo para pintarlo, esto se realizará suponiendo que moveTo estaba definido de antemano, si fuera así, trazaría la linea desde el punto que se indicó en moveTo hasta lineTo, si no definieramos anteriormente moveTo y usaramos lineTo directamente, este solo posicionaría el puntero, es decir, actuaría como un moveTo.
fill():
Esta función rellenará nuestra forma irregular siempre y cuando esté cerrada. Si vamos haciendo la forma sin dar ningún salto entre puntos y lanzamos fill, este cerrará automáticamente nuestra forma llevando una linea recta desde el punto último hasta el primer punto que pintamos y rellenando la forma ya cerrada.
Si en algún momento del dibujo, damos un salto con moveTo dejando abierta la forma, no se podrá rellenar el area.
Pongamos un ejemplo comentado que seguro os resultará más sencillo. Veamos:
//comenzamos con el camino
contexto.beginPath();
//situo el cursor en la posición x, y (50×90)
contexto.moveTo(50,90);//empiezo a trazar lineas diciendole las posiciones que quiero recorrer
contexto.lineTo(100,200);
contexto.lineTo(150,120);
contexto.lineTo(200,120);
contexto.lineTo(200,200);
contexto.lineTo(230,200);
contexto.lineTo(230,120);
contexto.lineTo(280,120);
contexto.lineTo(280,90);
//una vez trazadas todas las lineas, cierro con fill
contexto.fill();
Como podeis ver, hemos lanzado el beginpath y a continuación hemos situado el cursor con moveto, luego simplemente dibujamos una forma, en nuestro caso un intento de VT de VerTutoriales 😉
Si os fijais un poco, podeis ver como la posición final de lineTo(280, 90) es la misma que la del inicio moveTo(50, 90), por lo que al hacer fill, este se cierra de forma horizontal hasta llegar al punto de inicio.
Ya para terminar, os dejo el ejemplo completo para que lo podais copiar y pegar para que podais trastearlo:
<html>
<head>
<title>Tutorial de HTML5 – Elemento Canvas</title>
<script>
window.onload = function(){
//cargamos el elemento canvas
var canvas = document.getElementById(‘tutorial-canvas’);//una vez cargado el elemento, le digo en que contexto trabajaremos, en este caso 2d
var contexto = canvas.getContext(‘2d’);//Ya que tenemos el contexto del canvas cargado, lo utilizo para dibujar
//cambiamos el color de relleno
contexto.fillStyle = ‘#003366’;//comenzamos con el camino
contexto.beginPath();
//situo el cursor en la posición x, y (50×90)
contexto.moveTo(50,90);//empiezo a trazar lineas diciendole las posiciones que quiero recorrer
contexto.lineTo(100,200);
contexto.lineTo(150,120);
contexto.lineTo(200,120);
contexto.lineTo(200,200);
contexto.lineTo(230,200);
contexto.lineTo(230,120);
contexto.lineTo(280,120);
contexto.lineTo(280,90);
//una vez trazadas todas las lineas, cierro con fill
contexto.fill();
}</script>
</head><body>
<canvas id=»tutorial-canvas» width=»500″ height=»500″>
Este texto será el que muestre el navegador no compatible.
<br>
Por favor, actualiza a una versión que soporte HTML5.
</canvas></body>
</html>
Pues nada más, ya sabeis que si teneis alguna duda, podeis comentar en el artículo o compartir la duda en forohtml5.com
Un saludo!
