HTML5 Canvas Implementing a circle and showing the percentage of the progress bar example

This article mainly introduced the HTML5 Canvas realizes the circular progress bar and displays the numerical percentage effect example, has the certain reference value, has the interest to be possible to understand

This article describes an example of a HTML5 Canvas implementing a circular progress bar and displaying a number percent effect, as follows:

Achieve results

1. First create HTML code

<canvas id= "Canvas" width= "height=" style= "background: #000;" ></canvas>

2. Create a canvas environment

var canvas = document.getElementById (' canvas '),  //Get canvas element            context = Canvas.getcontext (' 2d '),  // Get paint environment, indicate 2d            CenterX = CANVAS.WIDTH/2,   //canvas Center point x coordinate            centery = CANVAS.HEIGHT/2,  //canvas Center point y coordinate            rad = math.pi*2/100,//divide 360 degrees into 100 parts, then each part is rad            speed = 0.1;//Load it's on it.

3. Draw a 5-pixel wide motion bezel

Draw a 5-pixel wide motion outer ring        function bluecircle (n) {            context.save ();            Context.strokestyle = "#fff"; Set stroke style            context.linewidth = 5;//Set line width            context.beginpath ();//path start            context.arc (CenterX, CenterY, 100,- MATH.PI/2,-MATH.PI/2 +n*rad, false); Used to draw arc Context.arc (x coordinate, y coordinate, radius, start angle, terminating angle, clockwise/counterclockwise)            Context.stroke ();//Draw            Context.closepath ();//Path End            Context.restore ();        }

4. Draw the white bezel

Draw white outer ring        function whitecircle () {            context.save ();            Context.beginpath ();            Context.linewidth = 2; Set line width            context.strokestyle = "Red";            Context.arc (CenterX, centery, 0, math.pi*2, false);            Context.stroke ();            Context.closepath ();            Context.restore ();        }

5. Percent text Draw

function text (n) {            context.save ();//save and restore ensure that the style attributes are applied only to the canvas element            Context.strokestyle = "#fff"; Set stroke style            Context.font = "40px Arial";//Set font size and font            //Draw font, and specify position            context.stroketext (n.tofixed (0) + "%", CENTERX-25, centery+10);            Context.stroke (); Execute Draw            Context.restore ();        }

6. Let it move up

Animation loop        (function Drawframe () {            window.requestanimationframe (drawframe);            Context.clearrect (0, 0, canvas.width, canvas.height);            Whitecircle ();            Text (speed);            Bluecircle (speed);            if (Speed > +) speed = 0;            Speed + = 0.1;        } ());

Full code

<! DOCTYPE html>