canvas绘制进度圆环_canvas画环形图设置最小值和最大值

canvas绘制进度圆环

1.封装方法

function CanvasCov(id,progress){
     var canvas = document.querySelector(id);
     var x = canvas.width/2;
     var y= canvas.height/2;
     var per = progress/100; //百分比
     var ctx = canvas.getContext('2d');
     ctx.clearRect(0,0,canvas.width,canvas.height); //先清空画布
     ctx.beginPath();      //绘制第一部分弧线
     ctx.arc(x,y,100,0,2*Math.PI*per);
     ctx.strokeStyle="red";
     ctx.lineWidth=50; //弧线/圆环的宽度
     ctx.stroke();
     ctx.beginPath(); //绘制第二条弧线
     ctx.arc(x,y,100,2*Math.PI*per,2*Math.PI);
     ctx.strokeStyle="black";
     ctx.lineWidth=50;
     ctx.stroke();
     ctx.font="40px 宋体";  //设置圆环中心显示的文字
     ctx.textBaseline="middle";
     ctx.textAlign="center";
     ctx.fillStyle="green";
     ctx.fillText(progress+"%",x,y);
   }     
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

调用（动画式的逐渐显示）

var process=0;
var percent = 30;//百分比
var inter  =  window.setInterval(function(){	
    if (process / percent <1) {
    	process+=2;
    }      
      CanvasCov('#canvas',process)               ;
},20)

1
2
3
4
5
6
7
8
9

这只是一个简单的demo,如果需要复杂的状态，还需完善