Canvas百分比動畫

CSS

        *{
            padding: 0;
            margin:0;
        }
        ul{
            list-style: none;
            overflow: hidden;
            width: 1200px;
            margin: 0 auto;         
        }
        li{
            width: 300px;
            height: 300px;
            float: left;
        }
        body{
            background-color: #333
        }
複製程式碼

HTML

    <ul id="canvas">
        <li>
            <canvas class="canvas" width="900" height="900"></canvas>
            <span>70%</span>
        </li>
        <li>
            <canvas class="canvas" width="900" height="900"></canvas>
            <span>60%</span>
        </li>
        <li>
            <canvas class="canvas" width="900" height="900"></canvas>
            <span>30%</span>
        </li>
        <li>
            <canvas class="canvas" width="900" height="900"></canvas>
            <span>80%</span>
        </li>     
    </ul>
    <canvas id="cvs"></canvas>
複製程式碼

JS

window.onload=function(){
    var canUl=document.getElementById("canvas");
    var li=canUl.getElementsByTagName("li");
    var can=canUl.getElementsByTagName("canvas");
    var pecent=canUl.getElementsByTagName("span");
    var can_arr=[];
    function Cavas_pecent(json){
        this.w=json.w;
        this.h=json.h;
        this.timer=null;
        this.deg=0;
        this.new_deg=json.new_deg,
        this.obj=json.obj;
        this.color=json.color;
        this.stroke_color=json.stroke_color;
        this.pecent_f=json.pecent_f;
        this.lineWidth=json.lineWidth;
        this.bg_color=json.bg_color;
    }
    Cavas_pecent.prototype.draw = function() {
            var txt=this.deg+"%";
            this.obj.lineCap="round";
            this.obj.lineWidth=this.lineWidth;
            this.obj.strokeStyle = this.stroke_color;
            this.obj.beginPath();
            this.obj.arc(this.w/2,this.h/2,this.w/2-this.lineWidth,0,this.deg/100*Math.PI*2);
            this.obj.fillStyle="#fff";
            this.obj.font="25px Arial"; 
            this.obj.fillText(txt , 150 - this.obj.measureText(txt).width/2 ,150);
            this.obj.stroke();
    }
    Cavas_pecent.prototype.drawBg = function(){
        this.obj.beginPath();
        this.obj.strokeStyle=this.bg_color;
        this.obj.arc(this.w/2,this.h/2,this.w/2-this.lineWidth,0,100*Math.PI*2);
        this.obj.stroke();
        this.obj.save();
        return this;
    }
    Cavas_pecent.prototype.go_draw = function(){
          var _this=this;
          _this.timer=setInterval(function(){
          if(_this.deg==_this.pecent_f){
                clearInterval(_this.timer);
            }
            else{
                _this.deg++;
                _this.obj.clearRect(0,0,300,300);
                _this.drawBg().draw()
              }
          },30)
    }
        for(var i=0;i<can.length;i++)
    {
        can_arr[i]=new Cavas_pecent({
            w:li[i].offsetWidth,
            h:li[i].offsetHeight,
            obj:can[i].getContext("2d"),
            color:"#a24565",
            stroke_color:"#a24565",
            pecent_f:parseInt(pecent[i].innerText),
            lineWidth:5,
            bg_color:"#fff"
        })
        can_arr[i].go_draw();
    }
}
複製程式碼