First look at the effect of drawn, as shown in the figure below, such a round -shaped progress.
I use the Canvas of HTML5 to make such a circular progress,
The first is the HTML page, and the document logo of HTML5 is:
<! Doctype html>
This document logo 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 created a canvas with 48 pixels in length and width here, because the diameter I want to draw is 48 pixels, and 61%of the Canvas element is written in the middle. This text is not the one displayed in the middle of the ring. This 61%is the text displayed when the old browser does not support Canvas elements.
Well, the content of the HTML page is basically completed so far, and then I will give it to JavaScript. Use JavaScript to depict the ring.
Function drawrocess () {// Select all Class elements of all Class on the page, and then iterate each element drawing (here is selected with jQuery's selection) $ ('canvas.process'). // The text in the middle of the Canvas tag first is the 61%(the Stringtrim method here is my own method. There are many ways to go before and after. (this $ (this) .text ()); var proces = text.substring (0, text.length-); // A canvas tag var canvas = this; // Get the drawing context currently supports 2D VAR Context. = Canvas.getContext ('2D'); // Clear the drawing area. If it is the first time to draw a picture on this canvas, there is nothing on the canvas, this step is not required. ); // *** Start Draw a gray round context.beginpath (); // The coordinates move to the round heart to context.moveto (24, 24); // Draw the circle, the round heart is 24,24, the radius 24, from the angle, the angle, from the angle Starting, the end of 2Pi is ended. The last parameter is the direction clockwise or counterclockwise context.arc (24, 24, 24, 0, math.pi * 2, false); context.closepath (); // fill the color context .fillstyle = '#ddd'; context.fill (); // *** gray round painting finished // painting progress context.beginpath (); // This step is very important when drawing a fan -shaped, the brush is not drawn by the center of the center of the heart, It is not a fan -shaped Context.moveto (24, 24); // The only difference between the circle above is here, not full of circles, draw a fan -shaped context.arc (24, 24, 24, 0, math.pi * 2 * 2 * Process / 100, false); context.closepath (); context.fillstyle = '#e74c3c'; context.fill (); // Draw the internal blank confest.beginpath (); context.moveto (24 , 24); Context. ARC (24, 24, 21, 0, math.pi * 2, true); context.closepath (); context.fillStyle = 'rgba (255,255,255,1)'; context.fill (); // Draw a line context. .beginpath (); context.arc (24, 24, 18.5, 0, math.pi * 2, true); context.closepath (); // The difference between the real and heart circles, fill is filled, stroke is the drawing line context. .strokestyle = '#ddd'; context.stroke (); // Write in the middle of context.font = bold 9pt arial; context.fillstyle = '#e74c3c'; context.textalign = er '; context.textBaseline =' MIDDLE '; context.moveto (24, 24); context.filltext (text, 24, 24);}Well, after drawing. Don't forget to see the effect of the drawprocess method.
Size: 2.4 KB View image attachment
Thank you for reading, I hope to help everyone, thank you for your support for this site!