Crear una barra de progreso en HTML5
Bienvenidos a VerTutoriales.com, en esta ocasión vamos a construir una barra de progreso para por ejemplo nuestros juegos de estrategia para crear unidades, para nuestros arcades para mostrar la vida de un personaje o el recurso que nos queda. Tal vez el espacio que queda por ocupar en nuestra aplicación o la carga de registros de nuestra base de datos, se me ocurren infinidad de utilidades, pero veamos el código y a continuación lo comentaremos ya que no tiene mucha complegidad. El código es el siguiente:
<html>
<head>
<title>Curso Tutorial - Barra de progreso HTML5 / Progress Bar HTML5</title>
<script>
//cargamos el elemento canvas
var canvas;
//una vez cargado el elemento, le digo en que contexto trabajaremos, en este caso 2d
var contexto;
var progreso;
window.onload = function(){
//cargamos el elemento canvas
canvas = document.getElementById(‘pantalla’);
//una vez cargado el elemento, le digo en que contexto trabajaremos, en este caso 2d
contexto = canvas.getContext(‘2d’);
progreso = 1;
setInterval(“Barra()”, 100);
}
function Barra()
{
contexto.fillRect(0, 0, progreso++, 15);
}
</script>
</head>
<body>
<canvas id=”pantalla” width=”640″ height=”480″>
Este texto será el que muestre el navegador no compatible.<br>Por favor, actualiza a una versión que soporte HTML5.
</canvas>
</body>
</html>
Como podeis ver y si habeis seguido nuestro curso sobre html5 no habreis tenido problema en comprenderlo, pero veamos la parte importante del código, primero declaramos la variable progreso que más adelante utilizamos en la función Barra() en la cual pintamos utilizando el contexto del canvas con contexto.fillRect(0, 0, progreso++, 15), este metodo lo que hace es pintar desde la coordenada 0,0 del canvas un rectangulo de tamaño horizontal progreso++ y de tamaño vertical 15, al utilizar progreso++, cada vez que llamamos a la función Barra() estamos incrementando en 1 px nuestro tamaño horizontal, generando de esta manera una barra que se incrementa cada setInteval de 100.
Espero que les sea de utilidad, si teneis dudas ya sabeis que podeis comentar lo que querais, además os animo a visitar forohtml5.com donde se habla de estos temas y muchos más sobre.
Un saludo!
<html>
<head>
<title>Curso Tutorial - Barra de progreso HTML5 / Progress Bar HTML5</title>
<script>//cargamos el elemento canvas
var canvas;//una vez cargado el elemento, le digo en que contexto trabajaremos, en este caso 2d
var contexto;
var progreso;window.onload = function(){
//cargamos el elemento canvas
canvas = document.getElementById(‘pantalla’);//una vez cargado el elemento, le digo en que contexto trabajaremos, en este caso 2d
contexto = canvas.getContext(‘2d’);
progreso = 1;
setInterval(“Barra()”, 100);}
function Barra()
{
contexto.fillRect(0, 0, progreso++, 15);
}
</script>
</head><body>
<canvas id="pantalla" width="640" height="480">
Este texto será el que muestre el navegador no compatible.<br>Por favor, actualiza a una versión que soporte HTML5.
</canvas>
</body>
<html>
<head>
<title>Curso Tutorial - Barra de progreso HTML5 / Progress Bar HTML5</title>
<script>
//cargamos el elemento canvas
var canvas;
//una vez cargado el elemento, le digo en que contexto trabajaremos, en este caso 2d
var contexto;
var progreso;
window.onload = function(){//cargamos el elemento canvas
canvas = document.getElementById(‘pantalla’);//una vez cargado el elemento, le digo en que contexto trabajaremos, en este caso 2d
contexto = canvas.getContext(‘2d’);
progreso = 1;
setInterval(“Barra()”, 100);}
function Barra()
{
contexto.fillRect(0, 0, progreso++, 15);
}
</script>
</head><body>
<canvas id="pantalla" width="640" height="480">
Este texto será el que muestre el navegador no compatible.<br>Por favor, actualiza a una versión que soporte HTML5.
</canvas>
</body>
</html>
</html>
