html5 canvas实现多重颜色圆环进度条
如题，使用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>
