Draw a doughnut-shaped progress representation with Html5canvas

First look at the effect of the drawing, such as the progress of such a doughnut.

I use HTML5 's canvas here to make such a doughnut-shaped progress,

The first is the HTML page, HTML5 's document ID is:

<! DOCTYPE html>

This document is much simpler to identify 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 with a width of 48 pixels, because the outer diameter of my drawing is 48 pixels, and in the middle of the canvas element is "61%", which is not the one shown in the middle of the ring, and this 61% is the text that is displayed when the old browser does not support the canvas element.

Well, so far the content of the HTML page has basically been completed, and then it is given to JavaScript, using JavaScript to depict the ring.

function drawprocess () {//selects all the canvas elements on the page that are class process, and then iterates over each element drawing (which is chosen by the jquery selector) $ (' canvas.process '). each ( function () {//First get the text in the middle of the canvas label, that is the 61% (here the Stringtrim method is my own method, the way to go before and after the space is a lot of, here is not posted) var text = Commonutil.s                            Tringtrim ($ (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 context = Canvas.getcontext (' 2d ');//Empty the drawing area, if it is the first time to draw on this canvas, there is nothing on the canvas,           This step does not require context.clearrect (0, 0, 48, 48);//* * * Start drawing a gray circle Context.beginpath ();             //coordinates move to center Context.moveto (24, 24); Draw Circle, Center is 24, 24, Radius 24, starting from angle 0, draw to end of 2PI, the last parameter is the direction of clockwise or counterclockwise Context.arc (, Math.PI * 0, false); Context.closepath ()            ;            Fill Color Context.fillstyle = ' #ddd '; Context.fill ();            Gray Circle Painting//Painting Progress Context.beginpath ();            This step is important when the fan is drawn, and the brush is not drawn in the center of the circle, not the fan Context.moveto (24, 24); The only difference from the circle above is here, not to draw a full circle, to draw a fan Context.arc (0, Math.PI * 2 * process/100, False); Context.closepath (); context.fillstyle = ' #e74c3c '; Context.fill ();//Draw internal blank context.beginpath (); Context.moveto (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 ();            Unlike painting a solid circle, fill is filled and the stroke is drawn line Context.strokestyle = ' #ddd '; Context.stroke ();    Write in middle Context.font = "bold 9pt Arial";    Context.fillstyle = ' #e74c3c ';    context.textalign = ' center ';    Context.textbaseline = ' Middle ';    Context.moveto (24, 24); Context.filltext (text, 24, 24);}

Well, it's finished. To see the effect don't forget to call the Drawprocess method of drawing.

Draw a doughnut-shaped progress representation with Html5canvas