Tutorial HTML5 – Dibujando sobre el canvas
Bienvenidos a VerTutoriales.com, anteriormente, hemos visto una pequeña iniciación del elemento Canvas y hemos explicado como usarlo. En esta ocasión vamos a seguir con el curso de HTML5 avanzando un poco más sobre Canvas y vamos a dibujar sobre él, utilizando diferentes funciones. Así que vamos allá:
2. Dibujando sobre el Canvas
Voy a explicar varias funciones que acompañarán al dibujado del canvas, estas funciones se han de utilizar una vez que se ha declarado el canvas y cargado en un contexto (si teneis alguna duda de como realizarlo podeis verlo en este primer tutorial). Pero antes, vamos a aclarar como se representan los valores dentro del elemento. Veamos:
Si declaramos un canvas:
<canvas id=»tutorial-canvas» width=»100″ height=»200″>
Este texto será el que muestre el navegador no compatible.
<br>
Por favor, actualiza a una versión que soporte HTML5.
</canvas>
En este caso, le estamos diciendo que tiene una anchura de 100 y una altura de 200 pixeles, esto quiere decir, que la parte superior izquierda sería la posición 0, 0 y que la última posición sería la 99, 199. Una vez explicado como nos posicionamos en el Canvas, veamos algunas funciones para dibujar:
fillRect(x,y,anchura,altura):
Esta función dibuja un rectangulo relleno. Recibe 4 parámetros, la posición en x e y dentro del canvas y la anchura y altura del rectangulo. Si quisieramos cambiarlo de color, deberemos de cambiar el estilo de relleno del contexto que estemos utilizando, pero eso lo explicaremos al final del artículo con el ejemplo.
strokeRect(x,y,anchura,altura):
Esta función dibuja el borde de un rectangulo, es decir, sin el relleno. Recibe 4 parámetros, la posición en x e y dentro del canvas y la anchura y altura del rectangulo. Si quisieramos cambiarlo de color, deberemos de cambiar el estilo de relleno del contexto que estemos utilizando, pero eso lo explicaremos al final del artículo con el ejemplo.
clearRect(x,y,anchura,altura):
Esta función borra un espacio rectangular que le indiquemos. Recibe 4 parámetros, la posición x e y, ancho y alto. Al borrar el rectangulo del canvas, mostrará el color de fondo que tengamos en nuestra web.
Una vez explicadas estas funciones, veamos un ejemplo práctico para que lo veais más claro:
<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’;
//y creamos cuadros en todo el canvas en x e y
for (x = 0; x < 500; x+=20)
{
for (y = 0; y < 250; y+=20)
{
//pintamos un nuevo cuadro en la posición x, y
contexto.fillRect(x, y, 15, 15);
}
}
//cambiamos el color de la linea del borde
contexto.strokeStyle = ‘#FF3300’;for (x = 0; x < 500; x+=20)
{
//Empezamos en una posición suficiente para que se solapen los cuadros con los bordes pintados
for (y = 240; y < 500; y+=20)
{
//pintamos un borde en la posición x e y
contexto.strokeRect(x, y, 15, 15);
}
}
//borramos un rectangulo del canvas
contexto.clearRect(60,220,100,100);
}</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>
Resumiendo, hemos creado una función que es llamada a la carga de la página, y a continuación hemos cambiado el color de los cuadros que vamos a pintar utilizando 2 arrays para que los vaya montando como si de una tabla se tratara, primero en color azulados hasta la mitad de nuestro canvas, y luego pintamos la otra mitad de bordes de color rojizo que hemos cambiado con anterioridad antes de pintarlos. Una vez pintado todo, borro un cuadro en la posición y con el tamaño que le designo y listo.
No creo que el código necesite más explicación, ya que con los comentarios está más que claro. De todas maneras si quisierais comentar algo, podeis hacerlo en este artículo o podeis escribir vuestra duda en el foro dedicado a este lenguaje ForoHTML5.com.
Pues nada más, espero que nos vayais siguiendo!
Un saludo!
