代码如下，由于canvas还是不太熟悉，还有很多欠缺，希望大家多提意见，谢谢
function DrawArc(id,opations){
this.canvas = document.getElementById(id);
this.context = this.canvas.getContext('2d');
this.c_width = opations.width;
this.c_height = opations.height;
this.value = opations.value; //当前圆值
this.average = opations.average;//平均值，用于判断当前圆状态
this.maxpercent = opations.maxpercent || 100;//最大百分比，可设置
this.color = opations.color; //顏色
this.text = opations.text;
this.t = null;
this.init();
}
DrawArc.prototype = {
init:function(){
this.canvas.width = this.c_width;
this.canvas.height = this.c_height;
var color = null;
this.context.clearRect(0, 0, this.c_width, this.c_height);
this.context.beginPath();
this.context.moveTo(this.c_width/2, this.c_height/2);
// // 绘制一个中心点为（c_width/2, c_height/2），半径为c_height/2，起始点0，终止点为Math.PI * 2的 整圆
this.context.arc(this.c_width/2, this.c_height/2, this.c_width/2>this.c_height/2?this.c_height/2:this.c_width/2, 0, Math.PI * 2, false);
this.context.closePath();
this.context.fillStyle = "#ddd"; //填充颜色
this.context.fill();
if(this.value < this.average){
color = this.color[0]
}else if(this.value == this.average){
color = this.color[1]
}else{
color = this.color[2]
}
// 绘制内圆
this.context.beginPath();
this.context.strokeStyle = color;
this.context.lineCap = "square";
this.context.closePath();
this.context.fill();
this.context.lineWidth = this.c_width>this.c_height?5:10;//绘制内圆的线宽度
this.loadCanvas(color);
},
draw:function(color,cur){
// 画内部空白
this.context.beginPath();
this.context.moveTo(24, 24);
this.context.arc(this.c_width/2, this.c_height/2, this.c_width/2>this.c_height/2?(this.c_height-10)/2:(this.c_width/2-10), 0, Math.PI * 2, true);
this.context.closePath();
this.context.fillStyle = 'rgba(255,255,255,1)'; // 填充内部颜色
this.context.fill();
// 画内圆
this.context.beginPath();
// 绘制一个中心点为（c_width/2, c_height/2），半径为c_height/2-5不与外圆重叠，
// 起始点-(Math.PI/2)，终止点为((Math.PI*2)*cur)-Math.PI/2的 整圆cur为每一次绘制的距离
this.context.arc(this.c_width/2, this.c_height/2, this.c_width/2>this.c_height/2?(this.c_height-5)/2:(this.c_width/2-5), -(Math.PI / 2), ((Math.PI * 2) * cur ) - Math.PI / 2, false);
this.context.stroke();
//在中间写字
this.context.font = "bold "+(this.c_width>=this.c_height?(this.c_height/8):(this.c_width/8))+"pt Arial"; // 字体大小，样式
this.context.fillStyle = color; // 颜色
this.context.textAlign = 'center'; // 位置
this.context.textBaseline = 'middle';
this.context.moveTo(this.c_width/2, this.c_height/2); // 文字填充位置
this.context.fillText((cur.toFixed(2)), this.c_width/2, this.c_height/2-(this.c_width/2>this.c_height?this.c_height/8:this.c_width/8));
this.context.fillText(this.text, this.c_width/2,this.c_height/2+(this.c_width/2>this.c_height?this.c_height/8:this.c_width/8));
},
loadCanvas:function(color){
var self = this;
var n = 0;
self.t = setInterval(function(){
if(n > (self.value/100)){
clearInterval(self.t);
}else{
n += 0.01;
self.draw(color,n);
}
},15);
}
}
var a1 = new DrawArc("myCanvas",{
width:100,
height:100,
value:45,
average:50,
color : ["#ff6100","#27b5ff","#29c9ad"],
text : "过关率"
})html代码只需要一个canvas传一个id即可。