canvas代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <canvas id="canvas" width="200" height="200"></canvas> 9 <script> 10 var canvas = document.getElementById('canvas'); 11 var process = 90; 12 var context = canvas.getContext('2d'); 13 14 // 画外圆 15 context.beginPath(); 16 context.arc(100, 100, 80, 0, Math.PI*2); 17 context.closePath(); 18 context.fillStyle = '#666'; 19 context.fill(); 20 var num = 0; 21 var timer = setInterval(function(){ 22 num += 1/Math.PI; 23 if( num >= process){ 24 clearInterval(timer); 25 } 26 drawCricle(context, num); 27 },13); 28 29 30 function drawCricle(ctx, percent){ 31 // 进度环 32 ctx.beginPath(); 33 ctx.moveTo(100, 100); 34 ctx.arc(100, 100, 80, Math.PI * 1.5, Math.PI * (1.5 + 2 * percent / 100 )); 35 ctx.closePath(); 36 ctx.fillStyle = 'red'; 37 ctx.fill(); 38 39 // 内圆 40 ctx.beginPath(); 41 ctx.arc(100, 100, 75, 0, Math.PI * 2); 42 ctx.closePath(); 43 ctx.fillStyle = 'white'; 44 ctx.fill(); 45 46 // 填充文字 47 ctx.font= "bold 30px microsoft yahei"; 48 ctx.fillStyle = "black"; 49 ctx.textAlign = "center"; 50 ctx.textBaseline = 'middle'; 51 ctx.moveTo(100, 100); 52 ctx.fillText(process + '%', 100, 100); 53 } 54 55 </script> 56 </body> 57 </html>
效果图：
css3代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .circle { 8 width: 200px; 9 height: 200px; 10 position: relative; 11 border-radius: 50%; 12 background: red; 13 } 14 15 .clip_left,.clip_right{ 16 width:200px; 17 height:200px; 18 position: absolute; 19 top: 0px;left: 0px; 20 transition: transform 2s; 21 } 22 .circle_left, .circle_right{ 23 width:200px; 24 height:200px; 25 position: absolute; 26 border-radius: 50%; 27 top: 0px;left: 0px; 28 background: green; 29 transition: transform 2s; 30 } 31 /*出于展示用的改变背景色*/ 32 /*.circle_left{ 33 background: green; 34 } 35 .circle_right{ 36 background: lightblue; 37 }*/ 38 .circle_right,.clip_right { 39 clip:rect(0,auto,auto,100px); 40 } 41 .circle_left , .clip_left{ 42 clip:rect(0,100px,auto,0); 43 } 44 45 /* 46 *当top和left取值为auto时，相当于0 47 *当bottom和right取值为auto时，相当于100% 48 */ 49 .mask { 50 width: 150px; 51 height: 150px; 52 border-radius: 50%; 53 left: 25px; 54 top: 25px; 55 background: #FFF; 56 position: absolute; 57 text-align: center; 58 line-height: 150px; 59 font-size: 16px; 60 } 61 62 </style> 63 </head> 64 <body> 65 <!--背景圆--> 66 <div class="circle"> 67 <!--左半边圆--> 68 <div class="circle_left"> 69 <div class="clip_left"> 70 71 </div> 72 </div> 73 <!--右半边圆--> 74 <div class="circle_right"> 75 <div class="clip_right"></div> 76 </div> 77 <div class="mask"> 78 <span>70</span>% 79 </div> 80 </div> 81 <script src="js/jquery-2.2.0.min.js"></script> 82 <script> 83 $(function(){ 84 if( $('.mask span').text() <= 50 ){ 85 $('.circle_right').css('transform','rotate('+($('.mask span').text()*3.6)+'deg)'); 86 }else{ 87 $('.circle_right').css({ 88 'transform':'rotate(0deg)', 89 "background":"red" 90 }); 91 $('.circle_left').css('transform','rotate('+(($('.mask span').text()-50)*3.6)+'deg)'); 92 } 93 }) 94 </script> 95 </body> 96 </html>
效果：
注意：以上代码IE8都不支持，IE9以上都支持，欧耶(^o^)/