Example canvas implementation of a circular progress bar animation

This article mainly introduces the canvas to achieve circular progress bar animation related data, small series feel very good, and now share to everyone, but also for everyone to do a reference. Let's take a look at it with a little knitting.

This article introduced the canvas to achieve a circular progress bar animation, share to everyone, as follows:

First show everybody, then on the code.

Progress bar Animation

1. The HTML part of the canvas is simply a canvas tag

The canvas canvas's width is the property of its own, to be in the inline style settings, if the style setting wide height will make your picture deformation.

<canvas id= "MyCanvas" width= "height=" >70%</canvas>

2. The JS code of the canvas

Main idea: The middle is composed of three circles, the outermost layer is a big circle with black side, inside a circle that changes the progress bar progress and a realistic percentage.

Note: To create a new layer for each circle, you can set the style of each layer individually, without affecting each other, just like a PS layer, a complete design is composed of many layers.

var canvas = document.getElementById ("MyCanvas"), var context = Canvas.getcontext ("2d"), function Draw (i) {// Round frame Context.beginpath (); context.linewidth = 1;context.arc (50,50,46,0,math.pi*2); context.strokestyle = "Grey"; Context.stroke ();//Great Circle Context.beginpath (); var grd = Context.createlineargradient (15,15,80,80); Grd.addcolorstop (0, " Red "); Grd.addcolorstop (0.5," yellow "); Grd.addcolorstop (1," blue "); Context.arc (50,50,38,0,math.pi*2* (i/100)); Context.linewidth = 16;context.strokestyle = Grd;context.stroke ();//Context.fillstyle = grd;//Context.fill ();// Small round Context.beginpath (); Context.arc (50,50,30,0,math.pi*2); context.linewidth = 1;context.strokestyle = "Grey"; Context.stroke (); Context.fillstyle = "White"; Context.fill ();//Word Context.beginpath (); context.textbaseline = "Middle" ; context.textalign = "center"; context.font = "20px Arial"; context.fillstyle = "Black"; Context.filltext (i+ "%", 50,50);}

3. Use the timer to refresh the canvas to achieve the effect of the progress bar

Use the Context.clearrect () method to empty the canvas

var i = 0;var progress = parseint (canvas.innerhtml);//Console.log (progress); var timer = setinterval (function () {if (i > = progress) {clearinterval (timer);} Context.clearrect (0,0,canvas.width,canvas.height);d Raw (i); i++;},50);