每日一个js实例6--通过面向对象实现进度条

<canvas id="canvas1"></canvas>

#canvas1{width: 500px;height: 500px;background:gray;}

<script>
    //requestAnimFrame兼容性处理
    window.requestAnimFrame = (function(){
        return  window.requestAnimationFrame ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          window.oRequestAnimationFrame      ||
          window.msRequestAnimationFrame     ||  
          function( callback ){
          window.setTimeout(callback, 1000 / 60);
        };
})();
function Progress(id){
        this.oCanvas=document.getElementById(id);
        this.oC=this.oCanvas.getContext("2d");
        this.width=0;
        this.drawBg=function(){
            this.oC.clearRect(0,0,this.oCanvas.width,this.oCanvas.height);
            this.oC.beginPath();
            this.oC.fillStyle="pink";
            this.oC.fillRect(30,30,250,10);
        };
        this.drawBar=function(){
            this.width+=1;
            this.oC.beginPath();
            this.oC.fillStyle="gold";
            //第一种效果：进度条增大
            if(this.width == 250){
                this.width=0;
                this.drawBg();
                this.oC.fillRect(30,30,this.width,10);
            }
            this.oC.fillRect(30,30,this.width,10);
            //第二种效果：进度条向右移动
            if(this.width == 240){
              this.width=0;
              this.width+=1;
              this.oC.fillRect(30+this.width,30,10,10);
            }
            this.oC.fillRect(30+this.width,30,10,10);
        }
    }
    var progress=new Progress("canvas1")
    function animloop() {
              progress.drawBg();
               progress.drawBar();
               requestAnimFrame(animloop);
         }
        animloop();
    </script>