/*
* 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>