Html5canvas drawing a doughnut-shaped progress representation instance _javascript

HTML5 Canvas Draw Doughnut progress

First look at the effect of the painting, as shown below, such a circular progress.

I use HTML5 's canvas here to make such a circular progress,

First is the HTML page, and the HTML5 document identification is:

<! DOCTYPE html>

This document identification is much simpler than HTML4.

The second step is to create a canvas canvas element on the page:

<canvas class= "Process" width= "48px" height= "48px" >61%</canvas>

I've created a canvas that is 48 pixels long and wide, because I want to draw the outer diameter of the circle is 48 pixels, in the middle of the canvas element is written "61%", this text is not shown in the middle of the ring Oh, this 61% is when the old browser does not support canvas elements when the text displayed.

Okay, so that's it. The content of the HTML page is almost complete, and then it is given to JavaScript, which uses JavaScript to depict the ring.

function drawprocess () {//selects all canvas elements on the page that are process-class, and then iterates each element drawing (this is selected using the jquery selector) $ (' canvas.process '). each (fun Ction () {//First get Canvas label in the middle of the text, is that 61% (here's the Stringtrim method is my own method, go before and after the space method a lot of, here is not posted) var text = Commonutil.st 
    Ringtrim ($ (this). text ()); 
         
      var process = text.substring (0, text.length-1); 
      A canvas label var canvas = this; 
  Get the drawing context, currently only supports "2d" var contexts = Canvas.getcontext (' 2d '); 
     
  Empty the drawing area, if it is the first time to draw on the canvas, there is nothing on the canvas, this step does not need Context.clearrect (0, 0, 48, 48); 
      Begin to draw a gray round context.beginpath (); 
      Coordinates moved to the center of the Context.moveto (24, 24); 
    Draw a circle, the center of the circle is 24, 24, Radius 24, starting from angle 0, painting to the end of 2PI, the last parameter is the direction of clockwise or counterclockwise Context.arc (A, n, 0, Math.PI * 2, false); 
      Context.closepath (); 
    Fill Color Context.fillstyle = ' #ddd '; 
      Context.fill (); 
      The gray circle draws the finished/drawing Progress Context.beginpath (); 
      This step is important when you draw a fan, not the fan Context.moveto (24, 24) that the brush does not draw in the center of the circle. The only difference with the top circle here, not to draw a full circle, draw aScalloped Context.arc (0, Math.PI * 2 * process/100, FALSE); 
    Context.closepath (); 
    Context.fillstyle = ' #e74c3c '; 
 
    Context.fill (); 
    Draw internal Blank context.beginpath (); 
    Context.moveto (24, 24); 
    Context.arc (0, Math.PI * 2, true); 
    Context.closepath (); 
    Context.fillstyle = ' Rgba (255,255,255,1) '; 
     
  Context.fill (); 
    Draw a line context.beginpath (); 
    Context.arc (18.5, 0, Math.PI * 2, true); 
      Context.closepath (); 
    The difference with the picture solid circle, fill is filled, stroke is the line Context.strokestyle = ' #ddd '; 
     
      Context.stroke (); 
    In the middle write Context.font = "bold 9pt Arial"; 
    Context.fillstyle = ' #e74c3c '; 
    context.textalign = ' center '; 
    Context.textbaseline = ' Middle '; 
    Context.moveto (24, 24); 
  Context.filltext (text, 24, 24);  }

All right, finish the painting. To see the effect don't forget to call the Drawprocess method of drawing Oh.

Size: 2.4 KB View Picture Attachments

Thank you for reading, I hope to help you, thank you for your support for this site!