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
        }
Copy the code

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>
Copy the code

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 (enclosing w / 2, enclosing h / 2, enclosing w / 2 - this. Our lineWidth, 0100 * math.h 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,300,300 (0); _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(); }}Copy the code