如题，使用canvas实现如图效果，该效果用于手机端，也可以用于支持canvas的PC浏览器
实现思想：在画布上画多重扇圆进行颜色叠加，最后在顶层加上一个白色并且半径最小的圆覆盖，使视觉上形成一个圆环。
第一层是一个灰色的全圆
第二层是从12点钟方向顺时针开始画的红色扇圆，当角度=360度时整个圆环都是红色的。
第三层是从12点钟方向逆时针开始画的橙色扇圆
当红色圆角度==橙色圆角度==0度时，圆环是灰色的（最底层的颜色）
当红色圆角度==360度，橙色圆角度==0度时，圆环是红色的（第二层颜色）
当红色圆角度==360度，橙色圆角度>0度时，圆环出现两种颜色（红色、橙色）
实现的源代码如下：点击这里下载源代码
DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<meta name="MobileOptimized" content="320"/>
<title>多色圆环进度title>
head>
<body>
<canvas id="procanvas" class="procanvas" value="100%">canvas>
<script>
function process(canvasid,op,stylewidth,styleheight){
var canvas = document.getElementById(canvasid);
var canvasvalue = canvas.getAttribute("value");
var process = canvasvalue.substring(0, canvasvalue.length-1);
var oProcess = op;
var context = canvas.getContext('2d');
var scale = window.devicePixelRatio;
var center = [stylewidth/2*scale,styleheight/2*scale];
canvas.style.width = stylewidth + "px";
canvas.style.height = styleheight + "px";
canvas.width = stylewidth*scale;
canvas.height = styleheight*scale;
//开始画一个灰色的圆
context.beginPath();
context.moveTo(center[0], center[1]);
context.arc(center[0], center[1], center[0], 0, Math.PI * 2, false);
context.closePath();
context.fillStyle = '#e6e5e5';
context.fill();
// 画进度(红色)
if(process != 0 && process != 100){
context.beginPath();
context.moveTo(center[0], center[1]);
if(process <25){
context.arc(center[0], center[1], center[0], Math.PI*1.5, Math.PI*(1.5+0.5*(process/25)), false);//设置圆弧的起始于终止点
}
else{
context.arc(center[0], center[1], center[0], Math.PI*1.5, Math.PI*2* ((process / 100)-0.25), false);//设置圆弧的起始于终止点
}
context.closePath();
context.fillStyle = '#db3030';
context.fill();
}
else if(process == 100){
context.beginPath();
context.moveTo(center[0], center[1]);
context.arc(center[0], center[1], center[0], 0, Math.PI*2, false);//设置圆弧的起始于终止点
context.closePath();
context.fillStyle = '#db3030';
context.fill();
}
//画进度(橙色)
if(oProcess != 0 && oProcess !=100){
context.beginPath();
context.moveTo(center[0], center[1]);
context.arc(center[0], center[1], center[0], Math.PI*1.5,Math.PI*1.5-(oProcess/25)*Math.PI*0.5, true);//设置圆弧的起始于终止点
context.closePath();
context.fillStyle = '#fb7d32';
context.fill();
//Math.PI*1.5-((oProcess+25)/100*Math.PI)
}
else if(oProcess == 100){
context.beginPath();
context.moveTo(center[0], center[1]);
context.arc(center[0], center[1], center[0], 0,Math.PI*2, true);//设置圆弧的起始于终止点
context.closePath();
context.fillStyle = '#fb7d32';
context.fill();
}
// 画内部空白
context.beginPath();
context.moveTo(center[0], center[1]);
context.arc(center[0], center[1], 21*scale, 0, Math.PI * 2, true);
context.closePath();
context.fillStyle = 'rgba(255,255,255,1)';
context.fill();
}
process("procanvas",40,52,52);//10是橙色
script>
body>
html>