ProgressBar HTML5 Canvas

[Guest ipsBruno]

Boa noite, me chamo Bruno. Hoje venho postar um código que fiz a algum tempo.

/*
*  Copyright (c) 2012 [iPs]TeaM
*  Bruno da Silva (brunoemail@r7.com)
*  Simples e eficiente biblioteca para criar efeito progressbar em javascript canvas

* www.brunodasilva.com
* www.ips-team.forumeiros.com 
*/

<script>
function createProgressBar(x, y, largura, altura, color, maximo, canvasid) {
       this.valorprogresso = 0
       this.maximo = maximo
       this.largura = largura
       this.altura = altura
       this.cnv = document.getElementById(canvasid).getContext('2d')
       this.background = document.getElementById(canvasid).style.background;
       this.posicaox = x
       this.posicaoy = y
       this.cor = color
       this.updateProgress = function () {
               if (this.valorprogresso < this.maximo) {
                       this.cnv.fillStyle = this.cor
                       this.cnv.fillRect(this.posicaox + ((this.largura /  this.maximo) * (this.valorprogresso)), y,this.largura /  this.maximo, this.altura)
                       this.valorprogresso+=1

                       if (this.textmiddle) {
                               this.cnv.fillStyle =this.background
                               this.cnv.fillRect(this.posicaox - 3, y + (this.tamanhof + this.altura), this.tamanhof * 5, this.tamanhof + this.altura - 1)
                               this.cnv.fillStyle = this.textcolor
                               this.cnv.font = this.textfonte
                               if ((((this.valorprogresso / this.maximo) * 100) >> 0) == 100) {
                                       this.cnv.fillText("Completo!", this.posicaox - 1, this.altura + y + (this.tamanhof * 2)-3)
                               } else {
                                       this.cnv.fillText((((this.valorprogresso / this.maximo) * 100) >> 0) + " %", this.posicaox - 2, this.altura + y + (this.tamanhof * 2))
                               }
                       }
               }
               return (this.valorprogresso < this.maximo);
       }
       this.getProgress = function () {
               return this.valorprogresso;
       }
       this.setProgress = function (v) {
               return this.valorprogresso = v;
       }
       this.showText = function (ativado, color, fonte, tamanho) {
               this.textcolor = color
               this.tamanhof = tamanho
               this.textfonte = tamanho + "pt " + fonte
               this.textmiddle = ativado;
       }
       return true;
}

</script>


<canvas style="background-color:black" id='canvasID' width=640 height=480></canvas>

<script>
// =============== [ Aqui um exemplo de uso ] ========================

bar =  new createProgressBar(200, 300, 300, 10, "green", 300, "canvasID");
bar.showText(true, "white", "verdana", 10);

executarMinhaProgress();

function executarMinhaProgress() {
if(bar.updateProgress()) { 
setTimeout(executarMinhaProgress , 5);
}
}

</script>

Consegui criar uma biblioteca (função objeto) que faz um sistema de progressbar simplificadamente, você pode especificar o estilo da progressBar e utilizar como desejar

Basicamente basta usar

createProgressBar(x, y, largura, altura, color, maximo, canvasid)

Sendo x,y posição da barra de progresso na área canvas; largura e altura da progressbar, color é a cor da mesma; máximo o valor máximo que ela pode chegar; e canvasid é o elemento html que usa tag canvas, coloque o id do mesmo

Depois basta utilizar a função obj.updateProgress que irá adicionar +1 na progressBar e retornar uma condicional, caso verdadeiro o valor máximo da barra de progresso ainda não foi atingido, caso contrário, foi.

A função showText serve para mostrar um texto abaixo da barra, mostrando a porcentagem atual. Quaisquer dúvidas, coloquem um comentário, responderei. Os erros estão sendo fixados (não achei nenhum até agora, mas pode haver por ser um sistema de difícil construção e bastante frágil)

Enfim. Espero que tenham gostado. O efeito é bastante bonito!

O código está no pastebin, na minha conta. Lá tem outros códigos em javascript caso alguém se interesse a olhar.

Abraços

[kya]

Gostei.

Como é que se coloca o polegar para cima como no Facebook 😉