Canvas Draw Ring% display

Me: JS code:  function circleprogress (id,value,average) { var canvas = document.getElementById (ID);  var context = Canvas.getcontext (' 2d ');  var _this = $ (canvas),  value= number (44),//current percentage, value  average = numbers (33),//average percent  color = "",//progress bar, Text style  maxpercent = 100,//maximum percentage, can be set  c_width = _this.width (),//canvas, Width & Nbsp;c_height =_this.height ();//canvas, height  //judgment set current display color  if (value== maxpercent) { color= "#29c9ad";  }else if (value> average) { color= "#27b5ff";  }else{ color= "#ff6100";  } //empty Canvas  context.clearrect (0, 0, c_width, c_height);  //draw the initial circle  context.beginpath ();  //move the starting point to the canvas center  context.moveto (C_WIDTH/2, C_HEIGHT/2);  //draws a center point for (C_WIDTH/2, C_HEIGHT/2), Radius c_height/2, starting point 0, The end point is Math.PI * 2 of the full circle Context.arc (C_WIDTH/2, C_HEIGHT/2, C_HEIGHT/2, 0, Math.PI * 2, false);  context.closepath ();  context.fillstyle = ' #ddd '; Fill Color  context.fill ();  //Draw Inner Circle  context.beginpaTh ();  context.strokestyle = Color; context.linecap = ' square ';  context.closepath ();       Context.fill ();  context.linewidth = 10.0;//Draws the line width of the inner circle function Draw (cur) {//Draw inside Blank context.beginpath ();      Context.moveto (24, 24);      Context.arc (C_WIDTH/2, C_HEIGHT/2, c_height/2-10, 0, Math.PI * 2, true);      Context.closepath ();  Context.fillstyle = ' Rgba (255,255,255,1) ';    Fill interior color Context.fill ();    Draw Inner Circle Context.beginpath (); Draw a center point for (C_WIDTH/2, C_HEIGHT/2) with a radius of c_height/2-5 not overlapping with outer circle,//Start point-(MATH.PI/2), End point for ((math.pi*2) *cur)-MATH.PI/2 The whole circle cur for each drawn distance Context.arc (C_WIDTH/2, C_HEIGHT/2, C_height/2-5,-(MATH.PI/2), ((Math.PI * 2) * cur)-MATH.PI/2, F    Alse);    Context.stroke ();  Write in middle Context.font = "bold 18pt Arial";  Font size, style Context.fillstyle = color;  Color context.textalign = ' center ';      Position context.textbaseline = ' middle ';  Context.moveto (C_WIDTH/2, C_HEIGHT/2); Text Fill position context.filltext (value+ "%", C_WIDTH/2, C_HEIGHT/2-20); Context.filltext ("correct rate", C_WIDTH/2, c_height/2+20);}            Me://Call timer for dynamic effects var timer=null,n=0;function loadcanvas (nowT) {timer = setinterval (function () {if (n>nowt) {        Clearinterval (timer);            }else{draw (n);        n + = 0.01; }},15);} Loadcanvas (value/100); timer=null;};   finally need to call circleprogress this method, and put the corresponding parameters in.

　　

Canvas Draw Ring% display