如題，使用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><!--value代表紅色--> <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>